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

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

  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更改:

  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事件需要在代码中显式的触发一下。

修改后的代码如下:

  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. ...

或者:

    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. ...

html select change事件触发的更多相关文章

  1. select change事件给其它元素赋值,本select的value或tex

    select change事件给其它元素赋值,本select的value或textonchange='$("#areaname").val($("option:selec ...

  2. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

  3. angular2 select change 事件

    刚开始这是啥?(wrong!!!    change事件会在 选择option行为  之前执行prodDirId,是取不到选择后正确的id值的,取得是选择行为前prodDirId的值(有试过setTi ...

  4. 手动 jq 触发 动态的 layui select change 事件

    var s= $('#province').val(); //先获取   默认选中的第一个 option 的值 ( value)    var select = 'dd[lay-value=' + s ...

  5. select控件自动触发change事件

    这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...

  6. jquery 怎么触发select的change事件

    可以使用jQuery的trigger() 方法来响应事件 定义和用法 trigger() 方法触发被选元素的指定事件类型. 语法 $(selector).trigger(event,[param1,p ...

  7. 关于element-ui select组件change事件只要数据变化就会触发的解决办法

    使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...

  8. jQuery 设置select,radio的值,无法自动触发绑定的change事件

    一.问题 今天在对select和radio做change事件绑定后,手动设置其value值,但是不能触发change事件 二.解决 使用trigger方法手动触发

  9. 通过jquery触发select自身的change事件

    ###通过jquery触发select自身的change事件 1.通过js来去触发select的change事件 代码如下:包含了html部分和js部分 //html部分 <select cla ...

随机推荐

  1. PS 滤镜— — sparkle 效果

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  2. BrowserSync(省时的浏览器同步测试工具)

    第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...

  3. CodeForces - 613D:Kingdom and its Cities(虚树+DP)

    Meanwhile, the kingdom of K is getting ready for the marriage of the King's daughter. However, in or ...

  4. Http客户端跳转和服务器端跳转的区别

    服务器端跳转:      服务器转发全程是没有客户端参与的,都在web container容器内部进行,没有任何服务器和客户端的通信,实际就是服务器内部的跳转. 这次forward, 服务器没有构建H ...

  5. Openstack web 添加和删除按钮

    注:当前已经时候用smaba将openstack环境的源码共享到windows系统上,并使用pycharm进行代码编辑和修改(参见openstack开发环境搭建).如下图:

  6. chromium浏览器开发系列第五篇:Debugging with WinDBG

    Windbg 相信windows开发的人都知道,有些人用的溜儿溜儿的,有个crash,直接拿这个工具一分析,就定位出来了.非常好用.以前有个同事,做sdk开发 的,会各种命令.来北京后,还去过微软面试 ...

  7. Elasticsearch的前后台运行与停止(tar包方式)

    备注:在生产环境中,往往一般用后台来运行.jps查看. 1.ES的前台运行 [hadoop@djt002 elasticsearch-2.4.3]$ pwd/usr/local/elasticsear ...

  8. InetAddress 类简介

    package javanet; import java.net.InetAddress; import java.net.UnknownHostException; public class dem ...

  9. 《深入分析Java Web技术内幕》读后感(servlet)

    见书第九章 P243 在Tomcat的容器等级中,Context容器直接管理Servlet在容器中的包装类Wrapper,所以Context容器如何运行将直接影响Servlet的工作方式. Servl ...

  10. 12. nc/netcat 用法举例

    nc命令用法举例 什么是nc nc是netcat的简写,有着网络界的瑞士军刀美誉.因为它短小精悍.功能实用,被设计为一个简单.可靠的网络工具 nc的作用 (1)实现任意TCP/UDP端口的侦听,nc可 ...