如何让 select的那个请选择不被选中.获取选中的value值和html

如何让 select的那个请选择不被选中.获取选中的value值和html,第1张

获取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中未选中的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9612026.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存