原生js和jquery获取select多选框选中的值(多选下拉)

时间: 2018-05-23阅读: 4086标签: select

这篇文章主要介绍分别通过原生js、jquery来获取select下拉框中option的选中值,和选中的文本,以及多选下拉框的选中值和选中文本的实现。

原生js的实现

1、获取select标签选中的值

var sel = document.getElementById(”sel”); 
var index =  sel.selectedIndex; // 选中索引
var text =  sel.options[index].text; // 选中文本
var value =  sel.options[index].value; // 选中值


2、获取多选select标签选中的值

html代码

<select id="sel" name="sel"  multiple>
	<option value="1">一
	<option value="2">二
	<option value="3">二
</select>
<button onclick="getSelectAll()">获取select的value</button>

js代码

<script>
function getSelectAll(){
	var sel = document.getElementById("sel");
		val="";
	for(i=0;i<sel.length;i++){
		if(sel.options[i].selected){
			val+=sel.options[i].value+",";//这里value为选中值。改为text为选中文本
		}
	}
	if(val!=""){
		val=val.substr(0,val.length-1);
	}
	console.log(val);
	return val;
}
</script>


Jquery的实现

1、获取select标签选中的值

$('#sel option:selected').text();//选中的文本
$('#sel  option:selected').val();//选中的值
$("#sel ").get(0).selectedIndex;//索引


2、获取多选select标签选中的值

如果select是多选的,通过val()获取的话,只能获取到第一个选项的value值。但是奇怪的是通过text()是可以获取到多个选中的文本的。

$('#sel option:selected').text();//多个选中的文本

遍历获取value的值:

$("#sel option:selected").each(function (){
     console.log($(this).val())
})




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/803

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!