[英]grouped options select with jquery
I have json object for which i am trying to write a grouped_options using jquery. 我有我试图使用jquery编写一个grouped_options的json对象。 My json object looks like this 我的json对象看起来像这样
data = {"01 CONSULT":[["1b Rules","40"]],"02 DEVELOPMENT":[],"03 QUALITY":[],"05 MARKETING":[["5e Research","66"]],"06 MISCELLANEOUS":[["6a Training","69"],["6b Meetings","70"]}
My dropdown should look like this : 我的下拉菜单应如下所示:
**01 CONSULT**
1b Rules
**02 DEVELOPMENT**
**03 QUALITY**
**05 MARKETING**
5e Research
**06 MISCELLANEOUS**
6a Training
6b Meetings
My code currently looks like this. 我的代码当前看起来像这样。 I am not able to get the parent values in the dropdown as I am struggling to write the jquery with grouped_options. 我无法在下拉列表中获取父值,因为我正在努力使用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");
);
} } }}
Any help would be appreciated..Thanks! 任何帮助将不胜感激..谢谢!
I am not sure if this is your complete code in the function, but you are not creating an optgroup 我不确定这是否是函数中的完整代码,但是您没有创建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>
Your current code doesn't append any optgroup elements. 您当前的代码未附加任何optgroup元素。 Maybe you can do something like this: 也许您可以执行以下操作:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.