Question

我有以下JSON输入：

[
  {
    "No Value in Support": [
      {
        "5": "In house support (HIS)"
      },
      {
        "6": "No interaction with support (NIS)"
      },
      {
        "7": "No value in SWR maintenance (NVS)"
      },
      {
        "8": "Support from other 3rd party (SOT)"
      }
    ]
  }
]

我正试图建立这样的东西：

<select id="sel" name="id">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
</select>

label的{{1}}是主阵列上的optgroup，key的每个value都是option子阵列和文本是值。

例如，这是上述示例的预期输出：

key

这是我到目前为止所做的：

<select id="sel" name="id">
  <optgroup label="No Value in Support">
    <option value="5">In house support (HIS)</option>
    <option value="6">No interaction with support (NIS)</option>
    <option value="7">No value in SWR maintenance (NVS)</option>
    <option value="8">Support from other 3rd party (SOT)</option>
  </optgroup>
</select>

但如果你看here，你会发现我没有正常工作，因为我将对象作为值。可以给我一些帮助吗？

Answer 1

由于您的JSON是单项对象数组，因此您必须将代码更改为数组的第一项：

  var sel_content = '';

  $.each(data[0], function(idx, arr) {
    sel_content += '<optgroup label="' + idx + '">';
    $.each(arr[0], function(arr_idx, arr_value) {
      sel_content += '<option value="' + arr_idx + '">' + arr_value + '</option>';
    });
    sel_content += '</optgroup>';
  });

  $('#sel').append(sel_content);

以下是它的一个小提琴：https://jsfiddle.net/y086oomp/4/

Answer 2

使用纯jQuery： // HTML

<select id="in"></select>
<button id="apply">APPLY</button>

// JavaScript

    var vbin = [
      {
        "No Value in Support": [
          {
            "5": "In house support (HIS)"
          },
          {
            "6": "No interaction with support (NIS)"
          },
          {
            "7": "No value in SWR maintenance (NVS)"
          },
          {
            "8": "Support from other 3rd party (SOT)"
          }
        ]
      }
    ];

    $("#apply").click(function() {
      $.each(vbin, function(idx, arr) {
        var $og = $("<optgroup></optgroup>");
        for (var k in arr) {
          $og.attr("label", k);
          $.each(arr[k], function(ai, av) {
            var $se = $("<option></option>");

            for (var ka in av) {
              $se.val(ka);
              $se.text(av[ka]);
            }

            $og.append($se);
          });
        }

        $("#in").append($og);
      });
    });

由于JSON结构有点笨重，但它确实有效。

工作笔：https://codepen.io/barrychapman/pen/WjLjMd

Answer 3

您的数据访问不正确。您需要正确使用迭代器才能执行以下操作。

var data = [{
    "No Value in Support": [{
      "5": "In house support (HIS)"
    }, {
      "6": "No interaction with support (NIS)"
    }, {
      "7": "No value in SWR maintenance (NVS)"
    }, {
      "8": "Support from other 3rd party (SOT)"
    }],
    "Not using Software": [{
      "9": "Business needs changed (BNC)"
    }, {
      "10": "Replaced by GE (RBG)"
    }, {
      "11": "Replaced by Iconics (RBI)"
    }, {
      "12": "Replaced by Others (RBO)"
    }, {
      "13": "Replaced by Rockwell (RBR)"
    }, {
      "14": "Replaced by Siemens (RBS)"
    }]
}];

var sel_content = '';

for (var key in data[0]) {
    sel_content = '<optgroup label="' + key + '">';
    data[0][key].forEach(function(item) {
        for (var prop in item) {
          	sel_content += '<option value="' + prop + '">' + item[prop] + '</option>';
        }
    });
    sel_content += '</optgroup>';
    $('#sel').append(sel_content);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel" name="id"></select>

<强> UPDATED FIDDLE

如何使用JSON中的选项构建optgroup？

3 个答案: