使用 JSON 数据将 select 选项更改为其他 select - JQuery

Question

我有一个 json 数据，如下所示：

[{
    "id": 9,
    "category": "Baby",
    "items": "[{\"value\":\"Baby Foods\"}]",
    "created_at": "2022-01-08T14:28:48.000000Z",
    "updated_at": "2022-01-08T14:28:48.000000Z",
    "deleted_at": null
},
{
    "id": 10,
    "category": "Adult",
    "items": "[{\"value\":\"Adult Clothes\"},{\"value\":\"Adult Bags\"},{\"value\":\"Adult Shoes\"}]",
    "created_at": "2022-01-09T10:46:34.000000Z",
    "updated_at": "2022-01-09T10:46:34.000000Z",
    "deleted_at": null
}]

它有一个类别列表及其项目。现在我现在要做的是将数据填充到 select 框中，如果用户更改从 JSON 查询的类别将显示项目（如 JSON 所示）到另一个 select 框作为属于该类别的选项 selected.

这是我到目前为止使用 jquery 尝试过的方法：

 let dropdown = $('#category');

dropdown.empty();
dropdown.append('<option selected="true" disabled>Choose</option>');
dropdown.prop('selectedIndex', 0);

const url = 'http://localhost:8000/admin/categories/show';

// Populate dropdown with list of categories
$.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
        dropdown.append($('<option></option>').attr('value', entry.category).text(entry.category));
    })
});

这是在类别 select 框中完美显示类别的结果：

如果某些类别被 select 编辑在另一个 select 框（第二个）上，我不知道如何获取项目。任何帮助将不胜感激。

Answer 1

你可以为你的类别change事件定义一个eventHandler，当它发生变化时，你可以从源数据中读取相关项目，并将项目放在目标选项中，就像这样：

let data = [{
    "category": "Baby",
    "items": "[{\"value\":\"Baby Foods\"}]",
  },
  {
    "category": "Adult",
    "items": "[{\"value\":\"Adult Clothes\"},{\"value\":\"Adult Bags\"},{\"value\":\"Adult Shoes\"}]",
  }
]

let categories = $('#category');
let items = $('#items')

function fillDropdown(target, {data, prop}) {
  $.each(data, function(key, data) {
    target.append($('<option></option>').attr('value', data[prop]).text(data[prop]));
  })
}

fillDropdown(categories, {data, prop: 'category'})

categories.on('change', function(e) {
  items.html('');
  let value = $(this).val();
  if (value) {
    let dataItem = data.find(v => v.category == value);
    const options = JSON.parse(dataItem.items);
    fillDropdown(items, {data: options, prop: 'value'})
  }
})

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

<select id="category">
  <option></option>
</select>
<select id="items"></select>

使用 JSON 数据将 select 选项更改为其他 select - JQuery

Change select options with other select using JSON data - JQuery

javascript

jquery

json

drop-down-menu

jquery-selectors