189 8069 5689
分别使用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()); //拿到选中项的文本
参考如下代码
$("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+"。");
});
})
显示效果
话不多说，请看代码：
//直接保存后缀.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多选下拉框所有选项的值，可以通过选取多选的数组进行循环判断即可。
方法如下：
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()" /
如图所示：