Question

我正在尝试使用jQuery填充几个具有相同类的选择框。这是我的代码

populateFieldMapping: function (data,obj) {
        jQuery('.field-mapping select').each(function()
        {
            var option = '<option value="" data-custom-id="_select_">' + "please select a field" + '</option>';
            jQuery.each(data, function (i, res) {
                option += '<option value="' + res.id + '" data-custom-id="' + dataID + '"  data-custom-name="' + res.name + '">' + res.name + '</option>'
            });
            $(this).html(option);
            obj.select2();
        });
    },

我的HTML

<div class="field-mapping">
     <select id="podio-fields-mapping" class="form-control" tabindex="-1">
     </select>
     <select id="podio-fields-mapping" class="form-control" tabindex="-1">
     </select></div>

一切正常，但我只获得第一个选择框的“请选择一个字段”默认选项。可能有什么不对？我在每个选择框中都获得了所有值。

obj = $('.form-control');

Answer 1

你的代码有一些错别字，我很害怕：

jQuery('.field-mapping select').each(function()
{
    var option = '<option value="" data-custom-id="_select_">' + "please select a field" + '</option>', // <- here you have a ',' instead of ';'
    jQuery.each(data, function (i, res) {
            option += '<option value="' + res.id + '" data-custom-id="' + dataID + '"  data-custom-name="' + res.name + '">' + res.name + '</option>'
    }}); // <- here you have an aditional '}'
    $(this).html(option);
 });

请检查控制台是否有错误。

您的标记中也不能有两个具有相同id="podio-fields-mapping"的元素。

Working fiddle

Answer 2

这更具可读性，并且最充分地使用jQuery

populateFieldMapping: function (data,obj) {
  jQuery('.field-mapping select').each(function() {
    var options = [];
    $sel = $(this);
    options.push($('<option/>',
     {"value":"", 
      "data-custom-id":"_select_",
      "text":"please select a field"})

    jQuery.each(data, function (i, res) {
      options.push($('<option/>',
        {"value":res.id,
         "data-custom-id":dataID,
         "data-custom-name=":res.name,
         "text":res.name});
    });
    $sel.empty().append(options);
  });
},

Jquery选择选项默认选项文本

2 个答案: