select onchange 事件的触发

最新推荐文章于 2023-05-29 13:07:08 发布

zyz511919766

最新推荐文章于 2023-05-29 13:07:08 发布

阅读量3w

点赞数 1

分类专栏： web前端开发文章标签： js

本文链接：https://blog.csdn.net/zyz511919766/article/details/39580127

版权

web前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

<select name="type" id="type" disabled="disabled" οnchange="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();
}
...