html select change事件触发

做小组内使用的一个简单工具，其中要实现的一个小功能是当某个下拉菜单的选择值改变时触发另一表单元素的属性变化。自然的想到使用select表单元素的onchange事件。

下拉菜单部分的代码如下：

[javascript]  view plain  copy

 

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

下拉菜单的值通过JS更改：

[javascript]  view plain  copy

 

1. ...  
2. tableType = getTableType(DNS, port, DBName, tableName);  
3. if(tableType == 1){  
4.     $("#type").val("1");  
5. }else if (tableType == 2){  
6.     $("#type").val("2");  
7. }  
8. ...  

结果发现下拉菜单的值发生变化时setDelType(this)并未被调用。原来，通过JS来改变select的值时不会触发其onchange事件的。只有通过鼠标或键盘操作，而且选择的值不同于原始值时才会触发该事件。若需通过JS改变select的值并触发onchange事件需要在代码中显式的触发一下。

修改后的代码如下：

[javascript]  view plain  copy

 

1. ...  
2. tableType = getTableType(DNS, port, DBName, tableName);  
3. if(tableType == 1){  
4.     $("#type").val("1");  
5.     $("#type").change();  
6. }else if (tableType == 2){  
7.     $("#type").val("2");  
8.     $("#type").change();  
9. }  
10. ...  

或者：

 

[javascript]  view plain  copy

 

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

转载于:https://www.cnblogs.com/sign-ptk/p/6429407.html