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事件。更好的做法是侦听父级change上的select事件，然后读取所选option的值。

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

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

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

1 个答案: