首页 > 代码库 > HTML中的<select>标签如何设置默认选中的选项
HTML中的<select>标签如何设置默认选中的选项
方法有两种。
第一种通过<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);
}
|
文章来源:HTML中的<select>标签如何设置默认选中的选项
HTML中的<select>标签如何设置默认选中的选项
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。