操作 select的options对象

HTML DOM集合

最近我朋友要我帮他写一些需求，然后就需要更新select中的options对象

我还以为要使用InnerHTML循环出来

结果最后出奇的顺利，因为发现了这一个属性

然后我最近打酱油的看来一本书

编写高质量Javascript代码，我还是有一些印象的就把它当中的建议3：减少全部变量污染加了进去

然后实现的时候，又发现了不止哪个小哥哥小姐姐写的很好用的封装好了利用了HTML DOM实现的操作select中的options集合的方法

参考地址：

javascript操作Select中的 options集合_日积月累@海纳百川的博客-CSDN博客

object.options.add(new Option(label,value))方法向集合里添加一项option对象；
 
        object.options.remove(index) 方法移除options集合中的指定项；
         object.options(index)或options.item(index)可以通过索引获取options集合的指定项；
         select标记还有一个属性为selectedIndex，通过它可能获取当前选择的option索引：object.selectedIndex
          1.清空options集合
             function   optionsClear(object)  
             {   var length = object.options.length;
                  for(var i=length-1;i>=0;i--){
                      e.options.remove(i);
                 }
             } 
         2.添加一项新option
            function addOption(object)
            {  object.add(new Option(label,value));
               //使用options集合中最后一项获取焦点
                object.selectedIndex = object.lentht-1;
             }
        3.删除options集合中指定的一项option
           function removeOption(index)
           { if(index >= 0)

               { object.remove(index);

（中间有问题需要自己优化一下~）

最后贴一下最后实现了的代码

html:

< tr >

                                           < td >选择部门</ td >

                                           < td >

                                                < select id = 'data' class = 'data' name = 'player2' lay-search lay-verify = 'required' style = ' padding-right : 30 px ;

    cursor: pointer ;

      display:inline ;

      height: 38 px ;

    line-height: 1.3;

    line-height : 38px\9 ;

    border-width : 1 px ;

    border-style : solid ;

    background-color : #fff ;

    border-radius : 2 px ;

      ' onchange = ' selectMonth ( this ) ' >

                                                     < option value = '70' >公司领导</ option >

                                                     < option value = '71' >顾问部</ option >

                                                     < option value = '72' >办公室</ option >

                                                     < option value = '73' >人力资源部</ option >

                                                     < option value = '74' >董秘室</ option >

                                                     < option value = '75' >财务部</ option >

                                                     </ select >

                                           </ td >

                                     </ tr >

                                     < tr >

                                           < td >选择明细栏目</ td >

                                           < td >

                                                < select name = 'player2' id = "selectPlayer2" lay-search lay-verify = 'required' style = ' padding-right : 30 px ;

    cursor: pointer ;

      display:inline ;

      height: 38 px ;

    line-height: 1.3;

    line-height: 38 px \9;

    border-width: 1 px ;

    border-style: solid ;

    background-color: # fff ;

    border-radius: 2px;

     ' >

                                                     < option value = '54' >办公室用品</ option >

                                                     < option value = '55' >日用品</ option >

                                                     < option value = '56' >名片</ option >

                                                     < option value = '57' >客户部工装</ option >

                                                     < option value = '58' >公司接待</ option >

                                                     < option value = '59' >食堂</ option >

                                                     < option value = '60' >酒水</ option >

                                                     </ select >

                                           </ td >

                                     </ tr >

js:

var data = [{ "title" : '办公室用品' , "id" : "54" }, { "title" : '日用品' , "id" : "55" }];

                 var wupin = {};

                wupin.ids = [];

                wupin.titles = [];

                 for ( var i in data) {

                      //表示遍历数组，而i表示的是数组的下标值，

                      //data[i]表示获得第i个json对象即JSONObject

                      //data[i]通过.字段名称即可获得指定字段的值

                      wupin.ids[i] = data[i].id;

                     wupin.titles[i] = data[i].title;

                      console .log(data[i].title);

                }

                 console .log(wupin.ids);

                 console .log(wupin.titles);

                 function selectMonth ( e ) {

                      console .log(e.value);

                      var selectPlayer2 = document .getElementById( "selectPlayer2" );

                     optionsClear(selectPlayer2);

                      for ( var i in wupin.ids){

                           addOption(selectPlayer2, wupin.titles[i], wupin.ids[i]);

                     }

                      //addOption(selectPlayer2, wupin.titles, wupin.ids);

                 }

                 function optionsClear ( object ) {

                      var length = object .options.length;

                      for ( var i = length - 1 ; i >= 0 ; i -- ) {

                            object .options.remove(i);

                     }

                }

                 function addOption ( object , label , value ) {

                      object .add( new Option(label, value));

                      //使用options集合中最后一项获取焦点

                      object .selectedIndex = object .lentht - 1 ;

                }

~~好像排版又很乱，就这样吧~~

很久了的，没有印象在草稿箱，一起发了==