如何获取下拉列表选中的值 jquery

分别使用javascript原生的方法和jquery方法

创新互联是一家集网站建设,振安企业网站建设,振安品牌网站建设,网站定制,振安网站建设报价,网络营销,网络优化,振安网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

select id="test" name=""

option value="1"text1/option

option value="2"text2/option

/select

code:

一：javascript原生的方法

1:拿到select对象： var myselect=document.getElementById("test");

2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselect.options[index].value;

4:拿到选中项options的text： myselect.options[index].text;

二：jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected"); //获取选中的项

2:alert(options.val()); //拿到选中项的值

3:alert(options.text()); //拿到选中项的文本

jquery怎么获取下拉框所有的值

参考如下代码

$("select").val(); // 选中项目的value值

$("select option:checked").text(); // 选中项目的显示值

示例如下：

创建Html元素

请选择：

select id="sel"

option value="1"选项1/option

option value="2"选项2/option

option value="3"选项3/option

option value="4"选项4/option

/select

input type="button" value="点击查看被选项目"

编写jquery代码

$(function(){

$("input").click(function() {

a = $("#sel").val();

b = $("#sel option:checked").text();

alert("被选项目的值："+a+"，被选项目的显示值："+b+"。");

});

})

显示效果

jQuery实现select下拉框获取当前选中文本、值、索引

话不多说，请看代码：

//直接保存后缀.htnl用谷歌浏览器打开，亲测有效

head

script

src=""/script

script

$(function(){

//为Select添加事件，当选择其中一项时触发

$("select:eq(0)").change(function(){

//code

});

//获取Select选中的Text:结果是由所有匹配元素包含的文本内容组合起来的文本

var

checkText

=

$("select:eq(0)

:selected").text();//建议用这个简单

=

$("select:eq(0)

option:selected").tetx();

=

$("#One").find(":selected").text();

=

$("#One").find("option:selected").text();

//如果多选，将返回一个数组，其包含所选的值。

var

checkValue

=

$("#select_id").val();

//获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容

var

checkValue

=

$("select:eq(0)

:selected").val();//=========强烈建议用这个，以防多选

//获取Select选中的索引值

var

checkIndex

=

$("#select_id

").get(0).selectedIndex;

//获取Select最大的索引值

var

maxIndex

=

$("#select_id

:last").prop("index");

//建议用这个

=

$("#select_id

option:last").prop("index");

=

$("select:eq(0)").find(":last").prop("index")

=

$("select:eq(0)").find("option:last").prop("index")

//=========================================================================================

//jQuery设置Select选择的

Text和Value:

//

设置Select的Value值为4的项选中

$("#select_id

").val(4);

//用这个

$("#select_id

[value='4']").prop("selected",

true);

$("#select_id

option[value='4']").prop("selected",

true);

//设置select中的第一个option被选中

$("select

:first").prop("selected",

true);//这个

$("select

:first").prop("selected",

'selected');

$("select

option:first").prop("selected",

"true");

$("select

option:first").prop("selected",

"selected");

//============================================================================================

//jQuery添加/删除Select的Option项

$("#select_id").append("option

value='Value'Text/option");

//为Select末尾追加一个Option(下拉项)

$("#select_id").prepend("option

value='0'请选择/option");

//为Select首部插入一个Option(第一个位置)

$("#select_id

:last").remove();

//删除Select中索引值最大Option(最后一个)

$("#select_id

:fist").remove();

//删除Select中索引值最小为0Option(第一个)

$("#select_id

[value='3']").remove();

//删除Select中Value='3'的Option

});

/script

/head

table

tr

td

!--multiple设定下拉框可以多选，size设定下拉框不呈现下拉方式，--

select

size="12"

id="One"

multiple="multiple"

option

value='1'苹果/option

option

value="2"香蕉/option

option

value="3"草莓/option

option

value="4"橘子/option

/select

/td

td

input

type="button"

value=""br

input

type="button"

value=" "br

input

type="button"

value=" "br

input

type="button"

value=""br

/td

td

select

size="12"

id="two"

multiple="multiple"

option

value="5"葡萄/option

/select

/td

td

input

type="button"

value=" up "brbr

input

type="button"

value="down"br

/td

/tr

/table

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

jquery 怎样获取select多选下拉框所有选项的值

思路：jquery 获取select多选下拉框所有选项的值，可以通过选取多选的数组进行循环判断即可。

方法如下：

function f(){

var se = document.getElementById("t");

var s = [];

for(i=0;ise.length;i++){

if(se.options[i].selected){

s.push(se[i].value);

}

}

alert(s);

}

select id="t" multiple="true"

option value="a"option-A/option  

option value="b"option-B/option

option value="c"option-C/option 

option value="d"option-D/option

/select

input type="button" value="确定" onclick="f()" /

如图所示：