动态创建的选项无法正常工作答案

【问题标题】：Option created dynamically don't work properly动态创建的选项无法正常工作
【发布时间】：2021-01-31 01:19:48
【问题描述】：

我正在处理一个表单，动态创建选择。所以我这样做了：

function populateSelect() {
  $.ajax({
    type: "GET",
    url: URLSELECT + 'tipologia',
    success: function (response) {
      let key;
      for (var k in response._embedded) {
        key=k;
        break
      }
      createSelect(response._embedded[key], "tipologia")
      let options = $('select[name=tipologia]').find('option');
      options.each((el)=>{
        $(this).on('click', function(){
          console.log($(this));
        })
      })
    },
    error: function(err){
      console.log(err);
    }
  });
}

function createSelect(options, select) {

 options.forEach((el)=>{
  let text = el.name;
  let option = document.createElement('option');
      option.setAttribute('value', text);
      option.textContent = text
      option.addEventListener('click', function(e){
        console.log('test);
        
      }) 
  document.querySelector(`[name=${select}]`).appendChild(option);
 })
}

现在，如果我检查 HTML，选项会以正确的方式创建，具有正确的值和正确的文本，但 addEventListener 不起作用。

【问题讨论】：

据我所知option 不支持点击事件。您必须在 select 上使用 onchange。
response._embedded[0] 将比所有 let key; 和 for 循环逻辑更简单、更快。在 1 周期循环之后，key 将始终等于 0。
@JeremyThille 我试过但他给我一个错误，所以我找到了这个修复
@Lain 谢谢lain 我会试试的；）
response._embedded.shift() 那么呢？

标签： javascript jquery createelement

【解决方案1】：

首先，click 事件在 option 元素上没有得到很好的支持。更好的做法是监听父级select 上的change 事件，然后读取所选option 的值。

另外，您的代码比它需要的复杂得多。您可以使用map() 和append() 从AJAX 请求的响应中更轻松地构建option 元素列表。试试这个：

let $select = $('select[name=tipologia]').on('change', e => {
  console.log(e.target.value);
});

function populateSelect() {
  $.ajax({
    type: "GET",
    url: URLSELECT + 'tipologia',
    success: function(response) {
      let options = response._embedded.map(o => `<option value="${o.name}">${o.name}</option>`);
      $select.html(options);
    },
    error: function(err) {
      console.log(err);
    }
  });
}

【讨论】：