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所示。
图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例子如下：
<font color="red">注意要有jQuery的库文件</font>
<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所示.
图3
图4
附
该文章于2017年8月16日于CSDN上首次发表，2017年12月24日搬家至此！
