利用jQuery實現下拉框選項改變事件的實用技巧

一、選項改變的意義及應用場景

在網頁應用程序中，下拉框是非常常見的元素之一。而當用戶改變下拉框中的選項時，需要觸發一些對應的功能實現，這時我們就需要用到jQuery來捕捉元素的選項改變事件了。

比如，在電商網站上，當用戶選擇不同的類別，商品列表就會發生變化；在管理後台中，當管理員不同的選項，表格數據會相應的刷新。

二、jQuery實現選項改變

1. 綁定選項改變事件

$('select').change(function(){
  // 在這裡寫下拉框選項改變後執行的代碼
});

首先，我們需要先選取元素，然後通過jQuery的change()函數來綁定一個選項改變事件。如此一來，當用戶在頁面上改變選項時，下拉框的我們綁定的函數就會被觸發。

2. 捕捉修改後的選項值

$('select').change(function(){
  var optionSelected = $(this).find("option:selected");
  var valueSelected  = optionSelected.val();
  var textSelected   = optionSelected.text();
});

代碼說明：

通過變數optionSelected，捕捉用戶選中的元素
通過變數valueSelected，捕捉用戶選中的元素的值。
通過變數textSelected，捕捉用戶選中的元素的文本值。

3. 修改其他元素值

$('select').change(function(){
  var optionSelected = $(this).find("option:selected");
  var valueSelected  = optionSelected.val();
  var textSelected   = optionSelected.text();
  
  $("p").text("下拉框當前選中的值是：" + valueSelected);
});

代碼說明：當下拉框選項改變時，通過使用$(‘p’)元素匹配所有的

元素，然後使用jQuery的text()函數，動態地更改

元素的內容。

三、實例演示

下面是一個實際的例子，是一個簡單的下拉框實現。當用戶選擇下拉框中的不同選項時，會改變下面。具體代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery實現<select>下拉框選項改變事件的實用技巧</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <select id="select_box">
      <option value="option_1">選項一</option>
      <option value="option_2">選項二</option>
      <option value="option_3">選項三</option>
    </select>

    <p>下拉框當前選中的值是：</p>
    
    <script>
      $('#select_box').change(function(){
        var optionSelected = $(this).find("option:selected");
        var valueSelected  = optionSelected.val();
        var textSelected   = optionSelected.text();
        
        $("p").text("下拉框當前選中的值是：" + valueSelected);
      });
    </script>
  </body>
</html>

以上代碼生成的頁面中，當用戶選擇下拉框的不同選項時，動態改變下面的文本。操作過程如下圖所示：

四、小結

利用jQuery實現下拉框選項改變事件的實用技巧，是在實現Web應用中非常常見的需求。而使用jQuery則能簡化我們的開發工作，提高我們的開發效率。在實際開發中應該靈活地應用這種方法，以便更好地優化用戶體驗，提供更加優良的用戶界面。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/156728.html