select标签如何设置默认选中的选项
来源:互联网 发布:中铁网络信用卡 编辑:程序博客网 时间:2024/04/26 02:53
方法有两种。
第一种通过<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来控制选中的项:
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);
}
1 0
- HTML中的<select>标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- select标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- Select标签如何动态设置默认选项
- html中<select>标签用法解析及如何设置select的默认选中状态
- 设置默认选中select的选中项
- jQuery设置select默认选中的值
- javascript 设置select的默认选项
- javascript 设置select的默认选项
- 用Jquery根据获取的value来设置select标签的默认选中项
- <select>标签默认选中值
- jquery select 设置默认选中
- angularjs ui-select如何设置默认选中值
- select默认选中后更改选项
- <s:select>设置默认选项
- 在jsavaScript中设置select的某个选项被选中
- 查找oracle数据文件、表空间的位置
- mysql命令大全
- 19.MapReduce五大过程
- java.lang.NoSuchMethodException: com.gxuwz.aiImage.web.struts.UserAction.user()
- C语言双链表框架搭建练习(一)
- select标签如何设置默认选中的选项
- 让自己开发的iOS App通过iTunes共享文件到Document目录
- 更改项目中jre的版本
- PHP随写笔记,函数
- CentOS6.5下Nginx1.10.2的安装过程
- js把html中的table数据导出到Excel中
- 母牛的故事
- effective C++
- 性能测试服务日记