问题描述
我正在处理一个表单,其中包含动态创建的选择。所以我做了这样的事情:
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无法正常工作。有什么建议?预先感谢
解决方法
首先,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);
}
});
}