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

Question

所以我有一个选择元素，我正在附加从我的 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);
    }
}

就在那里返回这个

这正是我想要的。 但是，如果我想获取其他数据，例如.. Icon 假设我想在从 Select 元素中选择一个元素时登录到控制台，我该怎么做？

最终目标是在我更改 Select 中的元素时打印出 json 对象的 Icon 属性。

JsonData 示例

<ItemModel>
<ACrush>+0</ACrush>
<AMagic>-5</AMagic>
<ARange>-2</ARange>
<ASlash>+0</ASlash>
<AStab>+0</AStab>
<DCrush>+43</DCrush>
<DMagic>-3</DMagic>
<DRange>+48</DRange>
<DSlash>+49</DSlash>
<DStab>+47</DStab>
<Icon>
https://vignette.wikia.nocookie.net/2007scape/images/a/a0/3rd_age_full_helmet.png/revision/latest?cb=20141217224936
</Icon>
<MagicDamage>+0%</MagicDamage>
<MeleeStrength>+0</MeleeStrength>
<Name>3rd age full helmet</Name>
<Prayer>+0</Prayer>
<RangedStrength>+0</RangedStrength>
<Slayer>0</Slayer>
<Undead>0</Undead>
</ItemModel>

Answer 1

您可以为您的选项设置数据，例如:

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

然后您可以在创建列表后为您的选择绑定(bind)更改:

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

  console.log(icon);
})