如何从数组中动态设置下拉列表的值

Posted 2023-05-08

【中文标题】如何从数组中动态设置下拉列表的值

【英文标题】：How to dyncamically set the value of a dropdownlist from an array

【发布时间】：2021-06-26 11:47:33

【问题描述】：

我正在尝试从下拉列表中获取值。我有下拉列表，我有我想要的值，但我不知道如何将它们相互链接。所以类别的值应该放在下拉列表中，然后该字符串中的图像值应该是结果。

这是名为 ill.json 的 JSON 文件数组

...
["id":"7","category":"Lente collectie 2021","image":"Teddy_bears_10.png","id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"
...

类别值进入下拉列表，然后结果应该是图像值： 这是我的下拉菜单 ...

const req = new XMLHttpRequest();
req.open('GET', 'ill.json', true);
req.send();
req.onload = function() 
  const json = JSON.parse(req.responseText);
  let dropdown = "";
  let html = "";
  //FILLING DROPDOWN WITH CATEGORYs
  var result = json.reduce(function (r, a) 
        r[a.category] = r[a.category] || [];
        r[a.category].push(a);
        return r;
    , Object.create(null));
    let keys = Object.keys(result)
    keys.forEach((key) => 
    dropdown += "<select id='select'>"
    dropdown += "<option value='" + key + "'>"
    dropdown += key
    dropdown += "</option>"
    dropdown += "</select"
  )
  document.getElementsByClassName('dropdown')[0].innerHTML = dropdown;

...

这就是我获得图像的方式 ...

//get all images
  json.forEach(function(val) 
      html += "<div class='illustratie-item'>";
      html += "<img class='dt-filelist-image' src='" + val.image + "'/>"

    html += "</div><br>";
);
document.getElementsByClassName('illustratie-wrapper')[0].innerHTML = html;
...

【问题讨论】：

据我了解，您已经创建了下拉列表，并且在更改它时您希望显示特定图像。对吗？

我创建了下拉菜单并单独显示图像。所以唯一缺少的是 onchange 函数...

【参考方案1】：

如果我做对了，应该就这么简单：

var categorySelect = document.querySelector('.dropdown');
categorySelect.addEventListener('change', function(evt) 
    var item = json.find(function(item) 
        return item.id === evt.target.value;
    );

    console.log(item.image); // there's your image
);

【讨论】：

在item.id === evt.target.value; 后面加上console.log(item.id, evt.target.value);，然后告诉我，你看到了什么。哦，我忘记了return 声明。我会很快更新的

当我点击类别时，我会得到所有的 id 和我点击的类别值。

当我把 console.log(item.image) 放在 );那么没有：项目未定义。但我得到所有图像而不是图像。所以它还没有在类别和图像之间建立联系

也许把item.id改成item.category。

我让它像这样工作： var categorySelect = document.querySelector('.dropdown'); categorySelect.addEventListener('change', function(evt) var item = json.find(function(item) if (evt.target.value === item.category) console.log(item.image);

【参考方案2】：

检查下面的sn-p。

var images = ["id":"7","category":"Lente collectie 2020","image":"Teddy_bears_10.png","id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"];

var dropdown = '';

dropdown  += '<select id="select">';
Object.keys(images).forEach(function(key) 
    dropdown += '<option value="' + images[key].id + '">';
    dropdown += images[key].category;
    dropdown += '</option>';
);

dropdown += '</select>';

document.getElementsByClassName('dropdown')[0].innerHTML = dropdown;

var categorySelect = document.querySelector('#select');
categorySelect.addEventListener('change', function(evt) 
    var item = images.find(function(item) 
        return item.id === evt.target.value;
    );
    console.log( item.image );
);

<div class="dropdown"></div>