jQuery OnChange根本不起作用

Question

我試圖在選擇框上觸發onchange，以顯示已選擇為警報的值。

我當前的選擇框代碼如下：

<span class="location select-box">
  <input class="value-holder" type="text" disabled="disabled" placeholder="Select a Location">
<div class="advanced-select-button">
  <i class="fa fa-chevron-down"></i>
</div>
<ul class="select-clone custom-list">
  <li data-value="1">Advertising</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
  <li data-value="4">Education</li>
  <li data-value="5">Entertainment</li>
  <li data-value="6">Garden</li>
  <li data-value="2">Airport</li>
  <li data-value="3">Cars</li>
</ul>

<select name="Select_Location" data-placeholder="Select a Location">
   <option>Select Category</option>
          <option value="1">Advertising</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
          <option value="4">Education</option>
          <option value="5">Entertainment</option>
          <option value="6">Garden</option>
          <option value="2">Airport</option>
          <option value="3">Cars</option>
        </select>
      </span>

我當前的jquery腳本如下：

<script>
    $('select').on('change', function() {
    alert( this.value );
    })
</script>

我看不到我要去哪里錯了，或者我在這里做錯了什么。 上面的Jquery代碼只是我嘗試過但沒有成功的眾多迭代之一。

如果有人可以幫我解決這個問題，我將永遠感激不已。

提前致謝。

ps-如果您想查看示例-我可以提供一個URL。

Answer 1

您需要將代碼包裝在可用於文檔的處理程序中。

在文檔“就緒”之前，無法安全地操縱頁面。 jQuery為您檢測到這種就緒狀態。 $( document ).ready()內包含的代碼僅在頁面Document Object Model（DOM）准備好執行JavaScript代碼后才能運行。

例

$(document).ready(function() {
    //Your code
});

 $(document).ready(function() { //Your code $('select').on('change', function() { alert(this.value); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="Select_Location" data-placeholder="Select a Location"> <option>Select Category</option> <option value="1">Advertising</option> <option value="2">Airport</option> <option value="3">Cars</option> <option value="4">Education</option> <option value="5">Entertainment</option> <option value="6">Garden</option> <option value="2">Airport</option> <option value="3">Cars</option> <option value="4">Education</option> <option value="5">Entertainment</option> <option value="6">Garden</option> <option value="2">Airport</option> <option value="3">Cars</option> </select> 

Answer 2

使用方式

   $(function() {
      $('select').on('change', function() {
        alert( this.value );
        })
    });

Answer 3

 $(document).ready(function(){ $('select').on('change', function() { alert( this.value ); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="location select-box"> <input class="value-holder" type="text" disabled="disabled" placeholder="Select a Location"> <div class="advanced-select-button"> <i class="fa fa-chevron-down"></i> </div> <ul class="select-clone custom-list"> <li data-value="1">Advertising</li> <li data-value="2">Airport</li> <li data-value="3">Cars</li> <li data-value="4">Education</li> <li data-value="5">Entertainment</li> <li data-value="6">Garden</li> <li data-value="2">Airport</li> <li data-value="3">Cars</li> <li data-value="4">Education</li> <li data-value="5">Entertainment</li> <li data-value="6">Garden</li> <li data-value="2">Airport</li> <li data-value="3">Cars</li> </ul> <select name="Select_Location" data-placeholder="Select a Location"> <option>Select Category</option> <option value="1">Advertising</option> <option value="2">Airport</option> <option value="3">Cars</option> <option value="4">Education</option> <option value="5">Entertainment</option> <option value="6">Garden</option> <option value="2">Airport</option> <option value="3">Cars</option> <option value="4">Education</option> <option value="5">Entertainment</option> <option value="6">Garden</option> <option value="2">Airport</option> <option value="3">Cars</option> </select> </span>