javascript - 控制所选值未按预期工作

Question

我有一个下拉菜单，它会根据另一个下拉菜单中选定的项目自动填充。

我使用 listbox1.val 来确定所选值。 但是，当我尝试获取第二个列表框的选定值时，该值将作为代码块返回。

这是我的第二个下拉列表的填充位置:

else if (el.val() === "West") {
    $("#drpArea").append("<option value='Barry'>Barry</option>");
    $("#drpArea").append("<option value='Cardiff'>Cardiff</option>");
    $("#drpArea").append("<option value='Pembroke'>Pembroke</option>");
    $("#drpArea").append("<option value='Swansea'>Swansea</option>");

}

列表框按预期填充。但是当我打电话时: $("#drpArea :selected").val 它返回一个代码块，而不是选定的值。

我也尝试过 $("#drpArea :selected").val.text

Answer 1

尝试使用 option:selected 并使用 .val() 获取值

$("#drpArea option:selected").val() // it returns selected value
$("#drpArea option:selected").text() // it returns selected option text
$("#drpArea").val() // it returns selected value

DEMO