一、基本用法
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>