HTML中的<select>标签如何设置默认选中的选项
来源:互联网 发布:2017年十大网络神曲 编辑:程序博客网 时间:2024/04/23 18:31
转载地址:there
主要用到的属性有 selected,selectedIndex,options。
<script>//jQuery on()方法是官方推荐的绑定事件的一个方法。$(".sel_wrap").on("change", function() {var o;var opt = $(this).find('option');opt.each(function(i) {if (opt[i].selected == true) {o = opt[i].innerHTML;}})$(this).find('label').html(o);}).trigger('change');</script>
<span style="font-family:微软雅黑,'microsoft yahei';">//</span> 设置选中$$(function(){ //页面加载完后执行js代码 var fh_group= document.getElementById('group').options; var fh_group_value=document.getElementById('group').getAttribute('rel'); var temp=''; for(var i=0;i<fh_group.length;i++){ temp=fh_group[i].getAttribute('value') if(temp==fh_group_value){ document.getElementById("group")[i].selected=true; } } })
方法有两种。
第一种通过<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);
}
0 0
- HTML中的<select>标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- HTML中的<select>标签如何设置默认选中的选项
- select标签如何设置默认选中的选项
- html中<select>标签用法解析及如何设置select的默认选中状态
- Select标签如何动态设置默认选项
- 关于struts使用html:select标签的默认选项
- html中<checkbox>标签用法解析及如何设置checkbox复选框的默认选中状态
- 如何改变HTML中Select控件的默认选中项
- 设置默认选中select的选中项
- 如何选中html中下拉列表中的选项的文字
- jQuery设置select默认选中的值
- Struts的html:checkBox标签默认选中
- javascript 设置select的默认选项
- javascript 设置select的默认选项
- 用Jquery根据获取的value来设置select标签的默认选中项
- <select>标签默认选中值
- 使用DBLINK迁移表结构
- 伍余元卜 顾孟平黄
- 和穆萧尹 姚邵堪汪
- 乐于时傅 皮卡齐康
- Intel Transactional Synchronization Extension (TSX) 事务性同步扩展
- HTML中的<select>标签如何设置默认选中的选项
- 计伏成戴 谈宋茅庞
- 祁毛禹狄 米贝明臧
- 熊纪舒屈 项祝董粱
- 贾路娄危 江童颜郭
- 杜阮蓝闵 席季麻强
- 梅盛林刁 钟徐邱骆
- Linux下svn命令大全
- Android 异步加载图片分析总结,多种方法加载图片资源