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

更新日期: 2018-05-23阅读: 8.1k标签: 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())
})




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

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