HTML中的<select>标签如何设置默认选中的选项
浏览数：43 /
时间：2015年06月09日
方法有两种。
第一种通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。
|
1
2
3
4
5
|
<
select
id
=
"sel"
>
<
option
value
=
"1"
>1</
option
>
<
option
value
=
"2"
selected
=
"selected"
>2</
option
>
<
option
value
=
"3"
>3</
option
>
</
select
>
|
第二种为通过前端js来控制选中的项: 由 www.169it.com 搜集整理
|
1
2
3
4
5
6
7
8
9
10
11
|
<
script
type
=
"text/javascript"
>
function change(){
document.getElementById("sel")[2].selected=true;
}
</
script
>
<
select
id
=
"sel"
>
<
option
value
=
"1"
>1</
option
>
<
option
value
=
"2"
>2</
option
>
<
option
value
=
"3"
>3</
option
>
</
select
>
<
input
type
=
"button"
value
=
"修改"
onclick
=
"change()"
/>
|
获取<select>标签选中项文本的js代码为:
|
1
2
|
var
val = document.all.Item.options[document.all.Item.selectedIndex].text
var
i=document.getElementById(
‘sel‘
).options[document.getElementById(
‘sel‘
).selectedIndex].value;
|
一些其它操作<select>标签的技巧如下：
1)动态创建select
|
1
2
3
4
5
|
function
createSelect(){
var
mySelect = document.createElement(
"select"
);
mySelect.id =
"mySelect"
;
document.body.appendChild(mySelect);
}
|
2)添加选项option
|
1
2
3
4
5
6
|
function
addOption(){
//根据id查找对象，
var
obj=document.getElementById(
‘mySelect‘
);
//添加一个选项
obj.add(
new
Option(
"文本"
,
"值"
));
}
|
3)删除所有选项option
|
1
2
3
4
|
function
removeAll(){
var
obj=document.getElementById(
‘mySelect‘
);
obj.options.length=0;
}
|
4)删除一个选项option
|
1
2
3
4
5
6
|
function
removeOne(){
var
obj=document.getElementById(
‘mySelect‘
);
//index,要删除选项的序号，这里取当前选中选项的序号
var
index=obj.selectedIndex;
obj.options.remove(index);
}
|
5)获得选项option的值
|
1
2
3
|
var
obj=document.getElementById(
‘mySelect‘
);
var
index=obj.selectedIndex;
//序号，取当前选中选项的序号
var
val = obj.options[index].value;
|
6)获得选项option的文本
|
1
2
3
|
var
obj=document.getElementById(
‘mySelect‘
);
var
index=obj.selectedIndex;
//序号，取当前选中选项的序号
var
val = obj.options[index].text;
|
7)修改选项option
|
1
2
3
|
var
obj=document.getElementById(
‘mySelect‘
);
var
index=obj.selectedIndex;
//序号，取当前选中选项的序号
var
val = obj.options[index]=
new
Option(
"新文本"
,
"新值"
);
|
8)删除select
|
1
2
3
4
|
function
removeSelect(){
var
mySelect = document.getElementById(
"mySelect"
);
mySelect.parentNode.removeChild(mySelect);
}
|
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
