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

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

提前致谢。

p.s - 如果你想看一个例子 - 我可以提供一个URL。

Answer 1

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

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。 $( document ).ready()中包含的代码只有在页面文档对象模型（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>

Jquery OnChange根本不起作用

3 个答案: