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>