+发表新主题
查看: 1500|回复: 0

[代码片段] DOM select对象

[复制链接]

[代码片段] DOM select对象

[复制链接]
殷三姗 发表于 2016-1-19 20:42:30 浏览:  1500 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
1. Select对象：

     事件：onchange: 选中项(值)改变时触发

     属性：select.selectedIndex : 获得当前选中项的位置

           select.options : 获得select下所有option对象

                          将select.options.length=0，等效于清空所有option

     方法：select.add(option)-----》新增option元素

           select.remove(index)--》删除指定option元素

    Option：每一个<option>元素

    创建option，同时设置内容和value属性值

      var opt=new Option(innerHTML[,value]);


    固定套路：向select中增加一个option

       select.add(new Option(innerHTML[,value]));

例如:

   

  2. <!DOCTYPE HTML>

  3. <html>

  4. <head>

  5. <title>二级联动列表</title>

  6. <meta charset="utf-8" />

  7. <style>

  8. .hide{ display: none; }

  9. </style>

  10. <script>

  11. /*实现“省”和“市”的级联下拉列表*/

  12. var cities=[

  13. [],        /*0号下标没有元素*/

  14. [{"name":'东城区',"value":101},

  15. {"name":'西城区',"value":102},

  16. {"name":'海淀区',"value":103},

  17. {"name":'朝阳区',"value":104}],



  19. [{"name":'河东区',"value":201},

  20. {"name":'河西区',"value":202},

  21. {"name":'南开区',"value":303}],



  23. [{"name":'石家庄市',"value":301},

  24. {"name":'廊坊市',"value":302},

  25. {"name":'保定市',"value":303},

  26. {"name":'唐山市',"value":304},

  27. {"name":'秦皇岛市',"value":304}]

  28. ];

  29. function getCities(selProvs){

  30.     var index=selProvs.selectedIndex;

  31. //找到name属性为cities的select元素,保存在变量selCities中

  32. var selCities=document.getElementsByName("cities")[0];//Elements返回的永远是集合

  33. //如果index==0;

  34. if(index==0){

  35. //  设置selCities的className为"hide"

  36.       selCities.className="hide";

  37. }else{//否则 ,清除selCities的className属性

  38.               selCities.className="";

  39.    //清除selCities下所有内容

  40.       selCities.innerHTML="";

  41.   selCities.add(new Option("-请选择-"));

  42.   for(var i=0;i<cities[index].length;i++){

  43.   selCities.add(

  44.    new Option(cities[index][i].name,cities[index][i]["value"])

  45.   );

  46.   }

  47. }

  48. }

  49. </script>



  51. </head>

  52. <body>

  53. <select name="provs" onchange="getCities(this)">

  54. <option>—请选择—</option>

  55. <option>北京市</option>

  56. <option>天津市</option>

  57. <option>河北省</option>

  58. </select>

  59. <select name="cities" class="hide"></select>

  60. </body>

  61. </html>
复制代码
这是页面效果:

204044c8gsowvpshppop88.png       

这是点击天津市后的页面效果:

204044c8gsowvpshppop88.png      


问题：html绑定事件    vs  js动态绑定事件

      1. html绑定的其实是字符串：

            <select onchange="createSelect(this)"></select>

                 function createSelect(){

                               this

                    }


        select.onchange=function(){//this-->select

                //eval("createSelect(this)")

                createSelect(this);

                  }

      html绑定this只能通过在html中显式传入

             如果不写，处理函数内部的this-->window

      2. js中动态绑定：

              select.onchange= createSelect;

               执行select.onchange()

              处理函数内的this就指当前触发事件的元素对象本身。
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

殷三姗
技冠群雄

34

主题

36

帖子

106

积分

技冠群雄

Rank: 6Rank: 6

积分
106
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网