做小组内使用的一个简单工具,其中要实现的一个小功能是当某个下拉菜单的选择值改变时触发另一表单元素的属性变化。自然的想到使用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. Chrome检查更新总失败?安装细则讲解

    现在 Google Chrome 的稳定版都已经发布 68.0 版本了,我机上还是 54, 本想在线更新一下,结果点击菜单项中的“关于 Google Chrome”后,进入的界面提示“更新失败(错误: ...

  2. ESFramework Demo -- P2P通信Demo(附源码)

    现在我们将在ESFramework Demo -- 文件传送Demo 的基础上,使用ESPlus提供的第四个武器,为其增加P2P通信的功能.在阅读本文之前,请务必先掌握ESFramework 开发手册 ...

  3. sublime插件insertDate显示ISO时间

    1 下载insertDate插件以及安装完毕 2 把光标放在想插入ISO时间的地方 3 按住:alt+f5,之后,在sublime下面的Date format string输入:iso.之后按ente ...

  4. 51 nod 1522 上下序列——序列dp

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1522 很好的思想.考虑从小到大一对一对填数,这样也能对它的大小限制 ...

  5. Spring Web MVC 的HandlerMapping的使用之-------SimpleUrlHandlerMapping

    转自:https://www.2cto.com/kf/201401/271141.html Spring MVC教程 映射处理器Handler Mapping 一.简析映射处理器 在spring mv ...

  6. <正则吃饺子> :关于oracle 中 exists 、not exists 的简单使用

    话不多说,简单的总结而已.网络上很多很详细介绍. 例如,博文:http://blog.csdn.net/zhiweianran/article/details/7868894  当然这篇也是转载的,原 ...

  7. CPU密集型和IO密集型

    对于Python如果是CPU密集型应该用多进程模型(大量的计算)   如果是IO密集型应该用多线程模型(数据的读取写入.网络IO数据传输) 由于GIL的存在,CPython不能有效的利用多核处理器,表 ...

  8. PCANet: A Simple Deep Learning Baseline for Image Classification?----中文翻译

    一 摘要 在本文中,我们提出了一个非常简单的图像分类深度学习框架,它主要依赖几个基本的数据处理方法:1)级联主成分分析(PCA);2)二值化哈希编码;3)分块直方图.在所提出的框架中,首先通过PCA方 ...

  9. linux命令之grep,find

    grep命令 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索 ...

  10. ugui获取text宽

    http://www.xuanyusong.com/archives/3587 void Start () { Font font = Resources.Load<Font>(" ...