html select change事件觸發

做小組內使用的一個簡單工具，其中要實現的一個小功能是當某個下拉菜單的選擇值改變時觸發另一表單元素的屬性變化。自然的想到使用select表單元素的onchange事件。

下拉菜單部分的代碼如下：

<select name="type" id="type" disabled="disabled" onchange="setDelType(this)">
     <option value="1">1-分區表</option>
     <option value="2" selected="selected">2-普通表</option>
</select>

下拉菜單的值通過JS更改：

...
tableType = getTableType(DNS, port, DBName, tableName);
if(tableType == 1){
    $("#type").val("1");
}else if (tableType == 2){
    $("#type").val("2");
}
...

結果發現下拉菜單的值發生變化時setDelType(this)並未被調用。原來，通過JS來改變select的值時不會觸發其onchange事件的。只有通過鼠標或鍵盤操作，而且選擇的值不同於原始值時才會觸發該事件。若需通過JS改變select的值並觸發onchange事件需要在代碼中顯式的觸發一下。

修改后的代碼如下：

...
tableType = getTableType(DNS, port, DBName, tableName);
if(tableType == 1){
    $("#type").val("1");
    $("#type").change();
}else if (tableType == 2){
    $("#type").val("2");
    $("#type").change();
}
...

或者：

 

...
tableType = getTableType(DNS, port, DBName, tableName);
if(tableType == 1){
    $("#type").val("1").change();
}else if (tableType == 2){
    $("#type").val("2").change();
}
...