JQuery对 Select 的各种操作,所有代码作者亲测

参考：

对 Select 的各种操作（JQuery）：https://blog.csdn.net/u011277123/article/details/54570948

js和Jquery对select的操作：https://blog.csdn.net/piggachen/article/details/69943250

Tip:对于无效的代码块，作者认为应该是浏览器或者是JQuery版本的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>select beta</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

</head>
<body>
	
<select id="jq_select" name="jq_select" required="true">
    <option value="1">父母</option>
    <option value="2">夫妻</option>
    <option value="3">子女</option>
    <option value="4">朋友</option>
    <option value="5" selected>其他</option>
	<option value="6">num</option>
	<option value="7">jQuery</option>
</select>


<script>
$(document).ready(function(){
 
alert("请打开【审查元素（F12）】，看控制台（console）输出");

//在下拉框最前添加一个选项
$("#jq_select").prepend("<option value='0'>领导</option>");
console.log("在下拉框最前添加一个选项[领导]");

//在下拉框最后添加一个选项
$("#jq_select").append("<option value='8'>同事</option>");
console.log("在下拉框最前添加一个选项[同事]");

  
//为Select添加事件，当选择其中一项时触发
 $("#jq_select").change(function(){
 console.log("你重新选择了select");
 
//获取下拉框选中项的index属性值 下标从0开始
var selectIndex = $("#jq_select").get(0).selectedIndex;
console.log("你选择的select的index:"+selectIndex);
 
//获取下拉框选中项的value属性值
var selectValue = $("#jq_select").val();
console.log("你选择的select的value:"+selectValue);
	
//获取下拉框选中项的text属性值
var selectText = $("#jq_select").find("option:selected").text();
console.log("你选择的select的text:"+selectText);

//设置下拉框index属性为1的选项 选中
$("#jq_select").get(0).selectedIndex = 1;
console.log("设置下拉框index属性为1的选项 选中");

//设置下拉框value属性为4的选项 选中
$("#jq_select").val(4);
console.log("设置下拉框value属性为4的选项 选中");

//设置下拉框text属性为[num]的选项 选中 [此方法无效]
$("#jq_select option[text='num']").attr("selected",true);
console.log("设置下拉框text属性为[num]的选项 选中[此方法无效]");

//获取下拉框最大的index属性值 [此方法无效]
var selectMaxIndex = $("#jq_select option:last").attr("index");
console.log("获取下拉框最大的index属性值"+selectMaxIndex+"[此方法无效]");
 
//移除下拉框最后一个选项
$("#jq_select option:last").remove();
console.log("移除下拉框最后一个选项");


//移除下拉框 index属性为0的选项 [此方法无效]
$("#jq_select option[index=0]").remove();
console.log("移除下拉框 index属性为0的选项 [此方法无效]");


//清空下拉框
$("#jq_select").empty();
console.log("清空下拉框");
 	
 });
 // END--为Select添加事件，当选择其中一项时触发
	
});


</script>

</body>
</html>

JQuery对 Select 的各种操作,所有代码作者亲测

猜你喜欢