• 通过事件实时获取<select>标签选项时需要注意的问题。


      今天编写了一个下拉框事件,功能是根据用户选择不同省份,另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现,不能简单地通过获取元素的值来进行判断,因为如果写出类似于“var province = document.getElementsById("ps").value”的话是有问题的(selected="select"表示预选项)。

      通过查询各种资料,找到了一种解决方法(肯定还有其他方式……),就是:首先获取已经选择的选项下标,下标通常是从0开始,这里就不多赘述了,学过变成的小伙伴肯定都知道,获取下标后还没有完成,我们需要根据下标获取该下标对应选项中的value值,正如以下代码所示:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     <script type="text/javascript">
     8 
     9         function province() {
    10             var index = document.getElementById("ps").selectedIndex;
    11             var p = document.getElementById("ps").options[index].value;
    12             var c = document.getElementById("c").options;
    13             console.log(p);
    14             c.length = 0;
    15             c.add(new Option("-请选择-", "-请选择-"));
    16             if (p == "山东省") {
    17                 console.log("shandong");
    18                 c.add(new Option("济南", "济南"));
    19                 c.add(new Option("潍坊", "潍坊"));
    20             }
    21             if (p == "浙江省") {
    22                 console.log("zhejiang");
    23                 c.add(new Option("杭州", "杭州"));
    24                 c.add(new Option("宁波", "宁波"));
    25             }
    26         }
    27 
    28     </script>
    29     <body>
    30 
    31         <span>省份</span>
    32         <select id="ps" onchange="province()">
    33             <option selected="selected">-请选择-</option>
    34             <option value="山东省">山东省</option>
    35             <option value="浙江省">浙江省</option>
    36         </select>
    37         <span>市区</span>
    38         <select id="c">
    39             <option selected="selected">-请选择-</option>
    40         </select>
    41 
    42     </body>
    43 </html>

      在以上代码的第11行和第12行中,首先获取了id名为“ps”的元素(也就是select)的已选中的选项下标,然后再根据下标获取到该选项的value值,其实可以直接把赋值给变量index的那段表达式直接放到第12行的index的位置,只是因为看起来不明了,所以我在这里分开写了。

      总结:

    //获取select标签已选中的选项下标
    var index = document.getElementsById("<select>标签的id").selectedindex;
    
    
    //根据选项下标获取对应选项的value值
    var selectedvalue = document.getElementsById("<select>标签的id").options[index].value;

      最后,虽然解决了问题,但是我还是觉得这种写法有些麻烦,所以,有时间会继续寻找更加简洁且高效的写法。

  • 相关阅读:
    第五周 day5 python学习笔记
    第四周 day4 python学习笔记
    第三周 day3 python学习笔记
    常用屏幕分辨率
    学习可以借鉴的大牛们的网站
    jq动态控制样式的一些方法(批量控制样式,带参数控制样式)
    jq实现事件委托
    h5Css新加的一些新的属性
    css布局模型
    task_13
  • 原文地址:https://www.cnblogs.com/moegarn/p/14235601.html
Copyright © 2020-2023  润新知