zoukankan      html  css  js  c++  java
  • 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. ...  
      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. ...  
  • 相关阅读:
    结对编程--黄金分割点游戏
    第一次单元测试,小紧张呢!
    Visual studio 2013 安装的漫长过程
    课后练习题:读程序
    进度条
    “啰嗦”的四则运算
    我与git“美妙”的一天
    结对编程(黄金分割点)
    Visual Studio 2015的安装和简单的测试
    软件工程学习体会
  • 原文地址:https://www.cnblogs.com/sign-ptk/p/6429407.html
Copyright © 2011-2022 走看看