HTML DOM集合
最近我朋友要我帮他写一些需求,然后就需要更新select中的options对象
我还以为要使用InnerHTML循环出来
结果最后出奇的顺利,因为发现了这一个属性
然后我最近打酱油的看来一本书
编写高质量Javascript代码,我还是有一些印象的就把它当中的建议3:减少全部变量污染加了进去
然后实现的时候,又发现了不止哪个小哥哥小姐姐写的很好用的封装好了利用了HTML DOM实现的操作select中的options集合的方法
参考地址:
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
;
}
~~好像排版又很乱,就这样吧~~