下拉列表不触发javascript函数

Question

我无法获得以下HTML来触发我的JS函数：

HTML:

<table style="margin-bottom: 8px">
<tr>
<td>
<label><b>Select Language:</b></label>
</td>
<td>
<select class="dropdown" id="selectlanguage">
<option id="enBtn">English</option>
<option id="zhBtn">简体中文</option>
</select>
</td>
</tr>
</table>   

JavaScript:

$("#enBtn").bind("click", function () {
setLanguage("en");
console.log("en");
});
$("#zhBtn").bind("click", function () {
setLanguage("zh");
console.log("zh");
})

当我使用以下HTML:时，setlanguage函数运行良好

<div>  
<a href="#" id="enBtn">English</a>  
<a href="#" id="zhBtn">简体中文</a>  
</div>  

但当我尝试用下拉列表触发时，它不起作用。

Answer 1

如果使用选择/下拉菜单，则必须将处理程序绑定到选择/下拉列表并侦听更改。

$('#selectlanguage').change(setLanguage)

<select class="dropdown" id="selectlanguage">
<option id="enBtn" value="en">English</option>
<option id="zhBtn" value="zh">简体中文</option>
</select>

和处理程序：

function setLanguage() {
console.log($(this).val());
}

如果你不想触摸你已经写好的setLanguage-功能：

$('#selectlanguage').change(getLanguage)

function getLanguage() {
console.log($(this).val());
setLanguage($(this).val());
//or handle what is in $(this).val() however you want to
}