jquery 如何从JSON中设置多个选择选项值

aamkag61  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(117)

作为Web开发中的一个乞丐,我只是问了一个关于使用jquery从json设置多个选择选项的问题:这里是我的选择(S)

第一个是颜色

<select name="attr[]" class="form-control" id="attrColor"><option value="0">--Select</option><option value="1">Red</option><option value="2">Green</option><option value="3">Yellow</option></select>

第二个是大小

<select name="attr[]" class="form-control" id="attrSize"><option value="0">--Select</option><option value="4">Small</option><option value="5">Medium</option><option value="6">Large</option></select>
JSON数据如下:-[{"attribute":"Color","valueID":"1","value":"Red"},{"attribute":"Size","valueID":"4","value":"Small"}]
我只需要一个代码片段来设置颜色在#attrColor和设置大小在#attrSize,两个选择都在同一个页面和同一个容器。
我将不胜感激。谢谢你
我是一个乞丐,我只是想有人帮助我

hof1towb

hof1towb1#

您可以使用jQuery为元素设置所选选项,方法是遍历JSON数据并将属性值与元素ID进行匹配。下面的代码片段可以帮助您实现这一点:

// Your JSON data
const jsonData = [
  {"attribute":"Color","valueID":"1","value":"Red"},
  {"attribute":"Size","valueID":"4","value":"Small"}
];

// Loop through the JSON data
jsonData.forEach(item => {
  const attributeName = item.attribute;
  const selectedValue = item.valueID;

  // Find the corresponding <select> element by its ID
  const $select = $(`#attr${attributeName}`);

  // Set the selected option
  $select.val(selectedValue);
});
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<select name="attr[]" class="form-control" id="attrColor"><option value="0"></option><option value="1">Red</option><option value="2">Green</option><option value="3">Yellow</option></select>
<select name="attr[]" class="form-control" id="attrSize"><option value="0">--Select</option><option value="4">Small</option><option value="5">Medium</option><option value="6">Large</option></select>

请确保在项目中包含jQuery以使此代码工作,因为它使用jQuery选择器和方法。
这段代码将遍历JSON数据,通过将属性名称附加到“attr”来查找相应的元素,并根据JSON数据中的valueID设置所选选项。

相关问题