Question

所以我有一个select元素，我要追加从API返回的数据。

function getHeadData() {
    $("#itemSelect").empty();

    if (headitemData.length < 1) {
        $.getJSON("http://localhost:9000/api/helmets", function (key, value) {
            console.log("request helmets");
            var item = "";
            headitemData = key;
            var len = key.length;
            for (let i = 0; i < len; i++) {
                item += '<option value="' + key + '">' + key[i].Name + '</option>';
            }
            $('#itemSelect').append(item);
        });
    }
    else {
        clearIndex(headitemData);
    }
}

在那边返回此

这就是我想要的。但是，如果我想获取其他数据，例如{。{1}} 假设我要从Icon元素中选择一个项目时登录控制台，该怎么做？

最终目的是当我在Select中更改项目时打印出json对象的Select属性。

JsonData示例

Icon

Answer 1

您可以为option设置数据，例如：

'<option data-icon="'+ key[i].Icon +'"></option>'

然后，您可以在创建列表后绑定所做选择的更改：

$('select').on('change', function () {
  const _this = $(this).find(':selected');
  const icon = _this.attr('data-icon');

  console.log(icon);
})

Answer 2

由于要在代码的其他区域中使用数据，请使用闭包创建一个环境，在该环境中变量不会泄漏到全局空间中。例如，使用回调：

(function () {
  var myData;
  function test(callback) {
   $.getJSON("http://localhost:9000/api/helmets",function  (data) {
        callback(data);
      });
    }
    test(function (data) {
      myData = data;
    });
    function getHeadData() {
      $("#itemSelect").empty();
     if (headitemData.length < 1){
        console.log("request helmets");
        var item = "";
        headitemData = myData;
        var len = myData.length;
        for (let i = 0; i < len; i++) {
            item += '<option value="' +myData+ '">' + myData[i].Name + '</option>';
        }
        $('#itemSelect').append(item);
     }
    else {
      clearIndex(headitemData);
    }
  }
  $("#itemSelect").on("change",function(){
      var value = $(this).val();
      var newData = myData.filter(item=>{
      if(myData.Name==value){
         return item;
      }
    });
   console.log(newData.Icon);
});

myData被缓存为特定于该闭包的全局变量。请注意，其他函数仅在回调完成后才能使用该变量。

Answer 3

下面的修改版本：

    function getHeadData() {
    $("#itemSelect").empty();

    if (headitemData.length < 1) {
        $.getJSON("http://localhost:9000/api/helmets", function (key, value) {
            console.log("request helmets");
            var item = "";
            headitemData = key;
            var len = key.length;
            for (let i = 0; i < len; i++) {
                var icon=key[i].Icon;
                item += '<option data-icon="'+icon+'" value="' + key + '">' + key[i].Name + '</option>';
            }
            $('#itemSelect').append(item);
        });
    }
    else {
        clearIndex(headitemData);
    }
}

简单测试，以从select中的第一个选项获取图标：

//Get first option to test output
var test=$("#itemselect option:first");
//Read data-icon
console.log(test.data('icon'));
//To update data-icon
test.data('icon','new icon');

在选择更改时回显

$("#itemselect").change(function(e) {
  var optionSelected = $("option:selected", this);
  console.log (optionSelected.data('icon'));

});

如何在我的选择中从json获取对象数据？

3 个答案: