如何用jQuery按类名循环填充select下拉选择控件

错误原因 #

你原有代码里的$(this).select('option:last')属于API误用：jQuery 中的.select()方法是用于绑定/触发文本选中事件的，并非用来查找子元素的接口。

正确实现方式 #

你可以通过以下两种方式将$(this)（当前遍历到的select元素jQuery对象）和option:last选择器结合使用：

方式1：使用find()方法（推荐，可读性更高） #

find()方法会在当前jQuery对象的子元素范围内匹配选择器，符合常规链式调用习惯：

const html = '<option value="你的值">你的选项文本</option>'; // 替换为实际要插入的option内容
$.each($('.mySelectClass'), function (idx, ctrl) {
  $(this).find('option:last').before(html);
});

方式2：使用选择器上下文参数 #

jQuery选择器支持传入第二个参数作为查找范围，直接限定option:last只在当前select元素内匹配：

const html = '<option value="你的值">你的选项文本</option>';
$.each($('.mySelectClass'), function (idx, ctrl) {
  $('option:last', this).before(html);
});

优化补充 #

如果你的需求就是把新option插入到所有选项的末尾，不需要特意查找最后一个option再执行before操作，直接使用append()方法更简洁：

$.each($('.mySelectClass'), function (idx, ctrl) {
  $(this).append(html);
});

内容的提问来源于stack exchange，提问作者Jeff Landon