如何获得select被选中option的value和text

一：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()); //拿到选中项的文本

1、如果select标签是有id属性的，如

<select

id=xx>

2、则用下述方法获取当前选项的值：

var

v

=

xxvalue;

或

var

v

=

documentgetElementById("xx")value;

//此方法兼容性好

3、如果select标签是有name属性的，如

<form

name=form1>

<select

name=xx>

则用下述方法获取当前选项的值：

var

v

=

form1xxvalue;

或

var

v

=

documentgetElementsByName("xx")[0]value;

4、如果同一页面含有多个name属性相同的标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算）

5、如果select标签不含有任何可供定位的属性，如

<select>

则用下述方法获取当前选项的值：

var

v

=

documentgetElementsByTagName("select")[0]value;

如果同一页面含有多个select标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算）

documentgetElementById('your select id')options

拿到了指定select的所有option，是个option对象的数组

你遍历就可以 比如第2个option的value：

documentgetElementById('aa')options[1]value

思路：点击option时触发事件，获取当前option的index，然后将对应index的div显示出来。实例演示如下:

1、HTML结构

<div id="test">

<li>青的</li><li>紫的</li><li>黄的</li>

</div>

<select>

<option value="option-1">苹果</option> 

<option value="option-2">葡萄</option> 

<option value="option-3">香蕉</option> 

</select>

2、jquery代码

$(function(){

$("#test li")hide();

$("select option")click(function() {

var n = $(this)index();

$("#test li")hide();

$("#test li")eq(n)show();

});

});

3、效果演示

你搞得复杂了，你会用this么

比如

$(dselect)change(function(){

selectFn(this);//你可以传个this进去

})

function

selectFn(_this){

var

selectedIndex

=

$(_this)find('option:selected')attr('i');

//保存被选中的option的属性i的值

$(_this)siblings('xs')eq(selectedIndex)show()siblings(dcon)hide();

//显示对应显示的对象

}

//你的代码没有细看，不过你如果用上this的话，对象就不会搞错了

然后给select加js然后通过对应值改变对应的内容id显示还有一种是即时读取,用ajax然后select内的列表为标题列表然后你要选中标题显示内容那么内容区域先定义出来然后select的option的value给你新闻的标题在内容区域里也把所有列表调出来(两边的sql语句一致)比如<select onchange='ShowInfo(thisvalue)'><option value='1'>第一条新闻标题</option><option value='2'>第二条新闻标题</option></select><div id='info_box'><div id='Cont_1'>第一条新闻内容</div><div id='Cont_2'>第二条新闻内容</div></div>CSS样式写#info_box div {display:none;}js函数:function ShowInfo(Id){documentgetElementById("Cont_"+Id)styledisplay="block"}大概就是这样了,手写的,可能有误还有就是JS一定要在页面内你select和div内容区域代码的后面不然加载到以后执行的时候很有可能就提示找不到对象了

以上就是关于如何获得select被选中option的value和text全部的内容，包括:如何获得select被选中option的value和text、怎样获取select 的标签的内容、jsp如何获取select列表当中所有option的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！