0

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');
4

2 に答える 2

0

あなたのコードにはいくつかのタイプミスがあります。

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);
 });

コンソールでエラーを確認してください。

また、マークアップに同じ要素を 2 つ含めることはできませんid="podio-fields-mapping"。

ワーキングフィドル。

于 2015-04-23T11:38:38.483 に答える
0

これははるかに読みやすく、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);
  });
},
于 2015-04-23T11:51:18.173 に答える