使用jQuery从动态创建的下拉列表中获取选定的项目ID

Question

我在HTML中的select元素如下所示；

    <select id="ddlCats">
    </select>

我使用jQuery将其填充在$(document).ready ：

// some ajax call
    $.each(msg.cats, function (i, cat) {
         $('#ddlCats').append(
    $('<option></option>').val(cat.catID).html(cat.catName)
    );
    });

这可以正常工作，并且列表可以通过以下方式生成良好：

<select id="ddlCats">
   <option value="68" selected="selected">option 1</option>
   <option value="59">option 2</option>
   <option value="60">option 3</option>
   <option value="62">option 4</option>
</select>

直到达到我尝试通过以下方式访问所选项目的值为止：

$('#ddlCats').val();

总是返回0。我也尝试了其他没有成功的选择器。

有任何想法吗？

Answer 1

select元素总是很烦人。 尝试这个：

$("#ddlCats option:selected").val();

Answer 2

您可以通过订阅onchange事件获得最新的价值：

    var i = [1,2,3,4,5,6,7];

for(var a = 0; a < 6; a++){
    $('#ddlCats').append($('<option></option>').val(i[a]).html(i[a]));
};

$('#ddlCats').change(function() {
  $('#test').text($('#ddlCats').val());
})

HTML就像这样：

<select id="ddlCats">
</select>

<div id="test"></div>