JavaScript和jQuery如何判断select是否被选中并获取select选中的值

最新推荐文章于 2024-05-05 15:54:12 发布

清风醉雨

最新推荐文章于 2024-05-05 15:54:12 发布

阅读量5.1k

点赞数 4

分类专栏： web前端技术文章标签： jquery javascript html

本文链接：https://blog.csdn.net/Firewall5788/article/details/120365000

版权

web前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

##JavaScript部分

var mySelect = document.getElementById("testSelect");	//定位id（获取select）
var index = mySelect.selectedIndex;	//选中索引（选取select中option选中的第几个）
var text = mySelect.options[index].text;	//获取选中文本
var value = mySelect.options[index].value;	//获取选中值
mySelect.options[index].selected	//判断select中的某个option是否选中，true为选中，false为未选中

###js例子如下：

<html>
<head>
    <script>
        function sel() {
            var mySelect = document.getElementById("testSelect");   //定位id（获取select）
            var index = mySelect.selectedIndex;   //选中索引（选取select中option选中的第几个）
			var text = mySelect.options[index].text; //获取选中文本，即option标签对之间的文字
            var value = mySelect.options[index].value;   //获取选中值
			document.getElementById("show_index").innerHTML = index;
			document.getElementById("show_text").innerHTML = text;
			document.getElementById("show_value").innerHTML = value;
			if (mySelect.options[2].selected) {  //注意index是从0开始的
				document.getElementById("show_isSelected").innerHTML = "选中了";
			} else {
				document.getElementById("show_isSelected").innerHTML = "没选中";
			}
        }
	</script>
</head>
<body>
    <select id="testSelect" onchange="sel()">
        <option id="op_1" value="Deep Learning">深度学习</option>
        <option id="op_2" value="Machine Learning">机器学习</option>
        <option id="op_3" value="Data Mining">数据挖掘</option>
        <option id="op_4" value="Image Processing">图像处理</option>
    </select>
    <br>
	<hr><font color="red">选中的option索引：</font><p id="show_index"></p>
	<hr><font color="red">选中的option文本：</font><p id="show_text"></p>
	<hr><font color="red">选中的option的值：</font><p id="show_value"></p>
	<hr><font color="red">“数据挖掘”选项是否被选中：</font><p id="show_isSelected"></p>
</body>
</html>

推荐使用菜鸟教程在线编辑器进行测试玩耍，效果如图1和图2所示。

##jQuery部分
1. 判断option是否被选中

$("#id").is(":checked")  //false代表未选中，true代表选中

2. 获取select选中的值

$("#mySelect option:selected").text()
$("#mySelect").find('option:selected').text()
$("#mySelect").val()

3. 获取select选中的索引

$("#mySelect").get(0).selectedIndex

4. 删除option

$("#myOption").remove()

###jQuery例子如下：
注意要有jQuery的库文件

<html>
<head>
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<script>
        function sel() {
            document.getElementById("show_index").innerHTML = $("#testSelect").get(0).selectedIndex;
            document.getElementById("show_all_text").innerHTML = $("#testSelect").text(); // 获取所有的文本
			document.getElementById("show_text").innerHTML = $("#testSelect option:selected").text(); // 获取选中的选项的文本
            document.getElementById("show_value").innerHTML = $("#testSelect").val();
            if ($("#op_3").is(":checked")) {
                document.getElementById("show_isSelected").innerHTML = "选中了";
            } else {
                document.getElementById("show_isSelected").innerHTML = "没选中";
            }
			$("#testSelect").aped("<option value="+op_5+">"+推荐系统+"<option>");
        }
    </script>
</head>
<body>
    <select id="testSelect" onchange="sel()">
        <option id="op_1" value="Deep Learning">深度学习</option>
        <option id="op_2" value="Machine Learning">机器学习</option>
        <option id="op_3" value="Data Mining">数据挖掘</option>
        <option id="op_4" value="Image Processing">图像处理</option>
    </select>
    <br>
    <hr><font color="red">选中的option索引：</font><p id="show_index"></p>
    <hr><font color="red">选中的option文本：</font><p id="show_text"></p>
    <hr><font color="red">选中的option的值：</font><p id="show_value"></p>
    <hr><font color="red">“数据挖掘”选项是否被选中：</font><p id="show_isSelected"></p>
	<hr><font color="red">所有选项的文本：</font><p id="show_all_text"></p>
</body>
</html>

效果如图3和图4所示.

清风醉雨

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript和jQuery如何判断select是否被选中并获取select选中的值

##JavaScript部分var mySelect = document.getElementById("testSelect"); //定位id（获取select）var index = mySelect.selectedIndex; //选中索引（选取select中option选中的第几个）var text = mySelect.options[index].text; //获取选中文本var value = mySelect.options[index].value; //获取选中值myS
复制链接

扫一扫