JQUERY：如何选择动态创建的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（）。