Jquery select 选项默认选项文本

Question

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

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>

一切正常，除了我只为第一个 select 框获得 "Please select a field" 默认选项。有什么问题吗？我在每个 select 框中获取所有值。

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 select 选项默认选项文本

Jquery select option default option text

javascript

jquery

jquery-selectbox