Question

我是jquery的新手。我想在我的选择框中显示JSON数据。我的JSON数据是

{  
   "Color":[  
      {  
         "Id":"1",
         "Attrib_name":"Color",
         "Attrib_value":"Red"
      },
      {  
         "Id":"2",
         "Attrib_name":"Color",
         "Attrib_value":"Blue"
      }
   ],
   "Size":[  
      {  
         "Id":"3",
         "Attrib_name":"Size",
         "Attrib_value":"5.6"
      },
      {  
         "Id":"4",
         "Attrib_name":"Size",
         "Attrib_value":"5.1"
      }
   ]
}

我想基于上面的json创建带有选项的optgroup。即

<optgroup label="color">
<option>Red</option>
<option>Blue</option>
</optgroup>
<optgroup label="size">
<option>5.6</option>
<option>5.1</option>
</optgroup>

我被困在如何开始。请帮我摆脱这个。

Answer 1

只需获取此代码的结果并将其粘贴为HTML

即可

它的作用是迭代你的json对象并创建元素。

＆＃13;

var json = {  
   "Color":[  
      {  
         "Id":"1",
         "Attrib_name":"Color",
         "Attrib_value":"Red"
      },
      {  
         "Id":"2",
         "Attrib_name":"Color",
         "Attrib_value":"Blue"
      }
   ],
   "Size":[  
      {  
         "Id":"3",
         "Attrib_name":"Size",
         "Attrib_value":"5.6"
      },
      {  
         "Id":"4",
         "Attrib_name":"Size",
         "Attrib_value":"5.1"
      }
   ]
}
console.log(
  Object.keys(json).map(a=>`<optgroup label="${a}">${json[a].map(b=>`<option>${b.Attrib_value}</option>`).join``}</optgroup>`)
)

＆＃13;

Answer 2

以下是如何执行此操作的完整示例。您只需构建HTML并使用jQuery函数将其添加到html文件中。检查我的codepen。代码也在下面

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
type="text/javascript"></script>

<select id="mySelect"></select>

<script type="text/javascript">
var data = {  
"Color":[  
  {  
     "Id":"1",
     "Attrib_name":"Color",
     "Attrib_value":"Red"
  },
  {  
     "Id":"2",
     "Attrib_name":"Color",
     "Attrib_value":"Blue"
  }
],
"Size":[  
  {  
     "Id":"3",
     "Attrib_name":"Size",
     "Attrib_value":"5.6"
  },
  {  
     "Id":"4",
     "Attrib_name":"Size",
     "Attrib_value":"5.1"
  }
]
};
var html = "";
for(var option in data){
   html += `<optgroup label="`+ option  +`">`;
   data[option].forEach(function(item){
   html += `<option value="` + item["Attrib_value"] + `" >`+ 
   item["Attrib_value"] +`</option>`
   });
   html += `</optgroup>`;
}
console.log('html',html);
$('#mySelect').html(html);
</script>

Answer 3

由于jQuery允许一个好的api创建dom elements，所以我会使用以下方法，但其他答案将起作用：

var data = {  
   "Color":[  
      {  
         "Id":"1",
         "Attrib_name":"Color",
         "Attrib_value":"Red"
      },
      {  
         "Id":"2",
         "Attrib_name":"Color",
         "Attrib_value":"Blue"
      }
   ],
   "Size":[  
      {  
         "Id":"3",
         "Attrib_name":"Size",
         "Attrib_value":"5.6"
      },
      {  
         "Id":"4",
         "Attrib_name":"Size",
         "Attrib_value":"5.1"
      }
   ]
};


var select = $('<select/>');

$.each(data, function(g, colors) {
  
  var group = $('<optgroup/>', {label:g});
  
  $.each(colors, function(i, color) {
    var option = $('<option/>', {
      value: color.Attrib_value,
      text: color.Attrib_value
    });
    
    select.append(group.append(option));
  });
  
});

$('#dropdown').append(select);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='dropdown'></div>

如何在带有optgroup的选择框中附加json数据

3 个答案: