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

Question

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

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 不工作。

Answer 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);
    }
  });
}

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

Option created dynamically don't work properly

javascript

jquery

createelement