做小组内使用的一个简单工具,其中要实现的一个小功能是当某个下拉菜单的选择值改变时触发另一表单元素的属性变化。自然的想到使用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. 解决Linux Kettle出现闪退问题

    linux环境, 运行sh spoon.sh打开图形化界面时经常出现闪退情况. 报错信息如下: cfgbuilder - Warning: The configuration parameter [o ...

  2. 遁入NOIP记

    回归noip啦 给自己定个小目标 500分起步 在这里列一下需要搞的东西OvO 1.算法基础 模拟 贪心 二分 分治 2.搜索 / 记忆化搜索 剪枝 对抗搜索 3.dp 状压 组合数学 树D 单队 D ...

  3. codevs 3314 魔法森林

    传送门 3314 魔法森林  时间限制: 3 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解   题目描述 Description 为了得到书法大家的真传,小E同学下定 ...

  4. nginx 轮询模式 nginx_upstream_jvm_route 插件安装

    使用nginx_upstream_jvm_route插件的目的是为了保证在轮询机制下的session的共享 前提:源码方式安装nginx.patch命令 1.下载nginx_upstream_jvm_ ...

  5. Java远程调用

    一.  概念: RMI全称是Remote Method Invocation-远程方法调用,其威力就体现在它强大的开发分布式网络应用的能力上,是纯Java的网络分布式应用系统的核心解决方案之一.它支持 ...

  6. bootstrap模版兼容IE浏览器代码嵌入

    1.  bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxc ...

  7. PCL类的设计结构

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=243 类和应用程序接口 对于PCL的大多数类而言,调用接口(所有public ...

  8. Elasticsearch中提升大文件检索性能的一些总结

       笔者在实际生产环境中经常遇到一些大文件的检索,例如一些书籍内容,PDF文件等.今天这篇博客主要来探讨下如何提升ES在检索大文件的一些性能,经验有限,算是一个小小的总结吧! 1.大文件是多大? E ...

  9. 关于JSP页面中的pageEncoding和contentType两种属性的区别

    转自:http://blog.csdn.net/dragon4s/article/details/6604624 JSP指令标签中<%@ page contentType="text/ ...

  10. 移动构造和移动赋值与std::move

    ------------------------------------移动构造------------------------------------------ 传统的深拷贝深赋值 对于类中,含有 ...