jQuery select change事件详解

一、基本用法

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>