操作 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.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 ;
}
~~好像排版又很乱，就这样吧~~
很久了的，没有印象在草稿箱，一起发了==