一、基本用法
1、首先需要在网页中引入jQuery库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、通过jQuery选择器选中目标select元素并绑定change事件
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<script>
$("#mySelect").change(function(){
console.log("选中了一个新选项");
});
</script>
3、在change事件的回调函数中编写想要执行的代码，比如控制页面中其他元素的显示或隐藏，发送AJAX请求等
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<div id="myDiv" style="display:none">选中了选项2</div>
<script>
$("#mySelect").change(function(){
if($(this).val()==2){
$("#myDiv").show();
}else{
$("#myDiv").hide();
}
});
</script>
二、事件冒泡和委托
1、当一个select元素有多个子元素时，如果直接给每个子元素都绑定change事件会导致代码冗余和效率低下。可以使用事件委托机制，将change事件绑定在其父元素上，由父元素代理子元素进行事件处理。
<div id="myDiv">
<select class="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select class="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select class="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script>
$("#myDiv").on("change",".mySelect",function(){
console.log("选中了一个新选项");
});
</script>
2、在事件冒泡机制下，子元素的change事件会一直向上冒泡到父元素，直到被处理或到达文档根部。可以使用stopPropagation方法实现事件的立即停止向上冒泡。
<div id="myDiv">
<select id="child">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script>
$("#child").change(function(event){
event.stopPropagation();
console.log("选中了一个新选项");
});
$("#myDiv").click(function(event){
console.log("点击了父元素");
});
</script>
三、其他常用方法
1、获取select元素当前选中的值
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<script>
$("#mySelect").change(function(){
var currentValue=$(this).val();
console.log("当前选中的值为："+currentValue);
});
</script>
2、动态添加和删除option选项
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<script>
$("#mySelect").append("<option value='4'>选项4</option>");
$("#mySelect option[value='2']").remove();
</script>
3、禁用和启用select元素
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<button id="disableBtn">禁用select元素</button>
<button id="enableBtn">启用select元素</button>
<script>
$("#disableBtn").click(function(){
$("#mySelect").prop("disabled",true);
});
$("#enableBtn").click(function(){
$("#mySelect").prop("disabled",false);
});
</script>
原创文章，作者：EBITD，如若转载，请注明出处：https://www.506064.com/n/351743.html
微信扫一扫 
支付宝扫一扫 