Question

基本上，我有（一个下拉列表，只是为了使情况更清楚）基于json构建的javascript下拉列表。首先，我有一个json，可让您设置类别（例如动物）。第二个json具有底点（狗，猫等）。在json中，我有名称和图像文件位置。下拉列表是在javascript html附加文件中生成的。如何将imgPath设置为所选内容？另外，如何才能对当前容器（而不只是下一个容器）进行更改？

这是下拉js的一部分：

itemhave = $('#have-dropdown' + i + '');

  itemhave.empty();

  itemhave.append('<option selected="true" value="0">Select a category</option>');

  itemhave.prop('selectedIndex', 0);

  // DROPDOWN HAVE 

  if (itemhave.val() == 0){
    const url = 'cssnjs/json/category.json';

    $.getJSON(url, function (data) {
      $.each(data, function (key, entry) {
        itemhave.append($('<option></option>').attr('value', entry.id).text(entry.name));
      })
    });
  }
  $('#have-dropdown' + i + '').change (function(){
    var sel = $('#have-dropdown'+i);
    $('#have-dropdown'+i).value = sel.options[sel.selectedIndex].value;
    if (itemhave.val() == 0){
      itemhave.empty();

      itemhave.append('<option selected="true" value="0">Select a category</option>');
      itemhave.prop('selectedIndex', 0);
      const url = 'cssnjs/json/category.json';

      $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
          itemhave.append($('<option></option>').attr('value', entry.id).text(entry.name));
        })
      });
    }
    else if (itemhave.val() == 1){
      itemhave.empty();

      itemhave.append('<option selected="true" value="0">Select an item/Go back</option>');
      itemhave.prop('selectedIndex', 0);
      const url = 'cssnjs/json/avatar.json';

      $.getJSON(url, function (data) {
        $.each(data.avatar, function (key, entry) {
          itemhave.append($('<option></option>').attr('value', entry.id).text(entry.name));
          havepic = 'src="' + this.imgPath + '"';
          wantpic = $('#have-dropdown'+i).selectedIndex;
          alert(wantpic);
        })
      });
    }

我要在这里使用它：

<div class="col-md-12">
    <img class="itempicture" ' + havepic + ' >
    <p class="itemname" title="Fire God">Fire God</p>
</div>

为了简化您和我的工作，我制作了一个jsfiddle来显示问题所在。在小提琴中，只有选项7可以显示错误（这是“贴花”类别）。要更好地查看问题，请执行以下操作：单击添加交易。点击下拉菜单，选择“贴花”。选择一个项目，然后再次单击添加交易。查看文本（src）。 https://jsfiddle.net/fragkingler/1t46qdw3/45/

获取json生成的下拉列表的selectedIndex并在append

0 个答案: