文章/答案/技术大牛

发布

问使用jquery选择分组选项
EN

Stack Overflow用户

提问于 2017-08-25 10:50:37

回答 2查看 25关注 0票数 0

我有一个json对象，我正在尝试使用jquery为它编写一个grouped_options。我的json对象如下所示

data = {"01 CONSULT":[["1b Rules","40"]],"02 DEVELOPMENT":[],"03 QUALITY":[],"05 MARKETING":[["5e Research","66"]],"06 MISCELLANEOUS":[["6a Training","69"],["6b Meetings","70"]}

我的下拉列表应该如下所示：

 **01 CONSULT**
   1b Rules
 **02 DEVELOPMENT**
 **03 QUALITY**
 **05 MARKETING**
   5e Research
 **06 MISCELLANEOUS**
   6a Training
   6b Meetings

我的代码目前是这样的。我无法在下拉列表中获取父值，因为我正在努力用grouped_options编写jquery。

  function change(data){
    $("#task_id").empty();
      for(var y in data){
        $("#task_id").append(
        $("<option></option>").attr("value", y).text(data[y]).appendTo("optgroup");
  );

}}

任何帮助都是appreciated..Thanks！

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-25 11:13:05

您当前的代码没有附加任何optgroup元素。也许你可以这样做：

data = {"01 CONSULT":[["1b Rules","40"]],"02 DEVELOPMENT":[],"03 QUALITY":[],"05 MARKETING":[["5e Research","66"]],"06 MISCELLANEOUS":[["6a Training","69"],["6b Meetings","70"]]}

function change(data){
  var slct = $("#task_id")
  slct.empty()
  
  Object.keys(data).forEach(function(og) {                 // for each data key
    var optgroup = $("<optgroup></optgroup>", {label: og}) // create optgroup element
    data[og].forEach(function(opt) {                       // for each option
      $("<option></option>", {                             // create option element
        value: opt[1],
        text: opt[0]
      }).appendTo(optgroup)                                // append option to group
    })        
    optgroup.appendTo(slct)                                // append group to select
  })
}

change(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="task_id"></select>

票数 1

Stack Overflow用户

发布于 2017-08-25 11:08:35

我不确定这是否是函数中的完整代码，但您并没有创建optgroup

var data = {
  "01 CONSULT": [
    ["1b Rules", "40"]
  ],
  "02 DEVELOPMENT": [],
  "03 QUALITY": [],
  "05 MARKETING": [
    ["5e Research", "66"]
  ],
  "06 MISCELLANEOUS": [
    ["6a Training", "69"],
    ["6b Meetings", "70"]
  ]
};




change();

function change() {
  var $select = $('#task_id');
  for (d in data) {
    var parent = d;
    var children = data[d];
    console.log(d);
    var $optgroup = $('<optgroup/>', {
      label: d,
    }).appendTo($select);
    for (c in children) {
      var child = data[d][c];
      $('<option/>', {
        value: child,
        html: child
      }).appendTo($optgroup);
    }
  }
}

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45873707

复制

相似问题

问使用jquery选择分组选项
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery选择分组选项EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery选择分组选项
EN