Jquery OnChange 根本不起作用

Question

我正在尝试在 select 框上触发 onchange，以显示已 select 作为警报编辑的值。

我目前的select盒子代码如下：

<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 代码只是我尝试过但没有成功的许多迭代之一。

如果有人能为我解决这个问题 - 我将永远感激不已。

提前致谢。

p.s - 如果您想查看示例 - 我可以提供 URL.

Answer 1

您需要将代码包装在 document-ready 处理程序中。

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

示例

$(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>

Jquery OnChange 根本不起作用

Jquery OnChange Won't work at all

javascript

jquery

select