
获取select元素的选中项:
在HTML页面中,有时候会获取当前select元素中所选中的那个值和显示值。下面是一个例子:
<tr>
<th scope="row" width="15%" nowrap >目标字段</th>
<td><select name="idMbzd" style="width:25%" onchang=”on_idmbzd_change();”>
<option value=”1”>eg1</option>
<option value=”2”>eg2</option>
<option value=”3”>eg2</option>
</select>
</td>
</tr>
<script>
function on_idmbzd_change(){
var sel_obj = documentgetElementByIdx("idMbzd ");
var index = sel_objselectedIndex;
alert(sel_objoptions[index]value);
alert(sel_objoptions[index]text);
}
</script>
在这里,关键用到select对象的selectedIndex属性。表示被选中那个元素的索引,从0开始。
当然也可以遍历select元素的所有值。如下:
<script>
var len = sel_objoptionslength;
for(i = 0 ;i<len ;i++){
var value = sel_objoptions[i]value;
var view_value = sel_objoptions[i]text
}
</script>
也多说一下,可以动态添加他的元素,如下:
<script>
var voption = documentcreateElement("OPTION");
voptionvalue = "4";
voptiontext = "eg4";
sel_objadd(voption);
</script>
设置select元素的选中项:
方法有两种。
第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >
第二种为通过前端js来控制选中的项:
< script type = "text/javascript" >
function change(){
documentgetElementById("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代码为:
var val = documentallItemoptions[documentallItemselectedIndex]text
var i=documentgetElementById( ‘sel‘ )options[documentgetElementById( ‘sel‘)selectedIndex]value;
一些其它 *** 作<select>标签的技巧如下:
1)动态创建select
function createSelect(){
var mySelect = documentcreateElement( "select" );
mySelectid = "mySelect" ;
documentbodyappendChild(mySelect);
}
2)添加选项option
function addOption(){
//根据id查找对象,
var obj=documentgetElementById( ‘mySelect‘ );
//添加一个选项
objadd( new Option( "文本" , "值" ));
}
3)删除所有选项option
function removeAll(){
var obj=documentgetElementById( ‘mySelect‘ );
objoptionslength=0;
}
4)删除一个选项option
function removeOne(){
var obj=documentgetElementById( ‘mySelect‘ );
//index,要删除选项的序号,这里取当前选中选项的序号
var index=objselectedIndex;
objoptionsremove(index);
}
5)获得选项option的值
var obj=documentgetElementById( ‘mySelect‘ );
var index=objselectedIndex; //序号,取当前选中选项的序号
var val = objoptions[index]value;
6)获得选项option的文本
var obj=documentgetElementById( ‘mySelect‘ );
var index=objselectedIndex; //序号,取当前选中选项的序号
var val = objoptions[index]text;
7)修改选项option
var obj=documentgetElementById( ‘mySelect‘ );
var index=objselectedIndex; //序号,取当前选中选项的序号
var val = objoptions[index]= new Option( "新文本" , "新值" );
8)删除select
function removeSelect(){
var mySelect = documentgetElementById( "mySelect" );
mySelectparentNoderemoveChild(mySelect);
话不多说,请看代码:
//直接保存后缀htnl用谷歌浏览器打开,亲测有效
<head>
<script
src=">
html:
<select id="sel">
<option value='s1'>苹果</option>
<option value='s2'>西瓜</option>
<option value='s3'>香蕉</option>
</select>
javascript:
$(function(){
var _val = $map( $("#sel option:not(:selected)"),
function(ele){return elevalue}
)join(",");
alert(_val);
})
其中主要的是:$("#sel option:not(:selected)"),这是返回没被选中的option集合,
使用$map函数对这个集合进行处理,取出其中元素的值,使用","进行分隔。
如果option中没有value属性,那么直接返回option的文本内容。
你取的是text属性还是value属性
C#winForm中,下拉列表的item只有一个text属性
而webwebForm的下拉列表有value和text两个属性--一个是内值,一个是文本
----------
其实是你的问题描述比较让人费解。。。
A你是要选中事件发生后返回“2”
B还是open page时自动把选中项放到“2”
(话说,你为什么不用C#的web控件?搞得这么纠结。。。)
如果A,你可以用value-text,也可以用text套用hashtable的key-value
如果B,你需要显示的判断value=value,然后给项加selected
分别使用javascript原生的方法和jquery方法
<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一:javascript原生的方法
1:拿到select对象: var myselect=documentgetElementById("test");
2:拿到选中项的索引:var index=myselectselectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value: myselectoptions[index]value;
4:拿到选中项options的text: myselectoptions[index]text;
二:jquery方法(前提是已经加载了jquery库)
1:var options=$("#test option:selected"); //获取选中的项
2:alert(optionsval()); //拿到选中项的值
3:alert(optionstext()); //拿到选中项的文本
documentgetElementById("sect")value -----这是获得选中的值
documentgetElementById("sect")options------这是获得select中所有的值,是个数组
以上就是关于如何让 select的那个请选择不被选中.获取选中的value值和html全部的内容,包括:如何让 select的那个请选择不被选中.获取选中的value值和html、jQuery实现select下拉框获取当前选中文本、值、索引、js或者jquery如何获取select中未选中的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)