javascript - 如何选择动态创建的 html 选择的值

Question

我有两个占位符用于两个不同的 html 选择，它们将被动态创建

var dropdown1 = '#select1';
var dropdown2 = '#select2';

稍后我会动态创建元素并附加一个事件......

$('some div').append(dropdown1);
$('some div').append(dropdown2);
$(dropdown1).append('<option>' + value + '</option>'); 
$(dropdown1).append('<option>' + value + '</option>'); 

然后我添加一个事件监听器......

$(document.body).on('change', dropdown1, function() {
alert($(dropdown1).val());
alert($(dropdown2).val());

});

我希望能够同时获得下拉 1 和下拉 2 的值。相反，我得到一个空数组或未定义的数组。

任何人都知道如何为这些动态创建的选择获取两个值？

Answer 1

您没有持有对 jQuery 对象的引用，只是一个 id 字符串。尝试这个：

$(document).on('change', dropdown1, function() {
    alert($(dropdown1).val()); /* or, you could use $(this).val() */
    alert($(dropdown2).val());    
});

这只会在您更改第一个下拉菜单时触发，因为选择器参数传递给 on()。