select JS原生 / jQuery获取选中值、设置当前选项等

在这里插入图片描述

JS原生版:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="" id="s1" onchange="getVal()">
    <option value="1" data-val="a">11111</option>
    <option value="2" data-val="b">22222</option>
    <option value="3" data-val="c">33333</option>
</select>

<script>
    var currentSel = document.getElementById('s1');

    var index = currentSel.selectedIndex;   //获取选中的索引值

    console.log(  index  );

    console.log(  currentSel.options[index].text  );    //获取选中的文本

    console.log(  currentSel.options[index].value  );   //获取选中的值
</script>

</body>
</html>

在这里插入图片描述

jQuery版:


	<script src="../jquery-1.12.4.min.js"></script>
	<script>
	    function getVal() {
	        //获取选中值 value
	        // console.log($("#s1").val());
	
	        //获取选中文本
	        // console.log($("#s1").find("option:selected").text());
	        // 或
	        // console.log($("#s1 option:selected").text());
	
	        //获取选中的属性值
	        // console.log($("#s1").find("option:selected").attr("data-val"));
	        // 或
	        // console.log($("#s1 option:selected").attr("data-val"));
	
	        //获取选中的索引:
	        //console.log($("#s1").get(0).selectedIndex);
	    }
	
	    function setVal() {
	        //设置选中项
	        //$("#s1").val(2);
	        // 或
	        $("#s1").get(0).selectedIndex =2;
	    }
	
	    $(document).ready(function () {
	        setVal();
	    })
	
	
	</script>

猜你喜欢

转载自blog.csdn.net/freedomVenly/article/details/83150468