[英]Jquery OnChange Won't work at all
I am trying to trigger an onchange on a select box, to show the value that has been selected as an alert. 我试图在选择框上触发onchange,以显示已选择为警报的值。
My current select box code is as follows: 我当前的选择框代码如下:
<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>
My current jquery script is as follows: 我当前的jquery脚本如下:
<script>
$('select').on('change', function() {
alert( this.value );
})
</script>
I can't see where I am going wrong, or what I am doing wrong here. 我看不到我要去哪里错了,或者我在这里做错了什么。 The above Jquery code is just one of many iterations I've tried without success. 上面的Jquery代码只是我尝试过但没有成功的众多迭代之一。
If someone can figure this out for me - I would be eternally grateful. 如果有人可以帮我解决这个问题,我将永远感激不已。
Thanks in advance. 提前致谢。
ps - if you would like to see an example - I can provide a URL. ps-如果您想查看示例-我可以提供一个URL。
You need to wrap your code in document-ready handler. 您需要将代码包装在可用于文档的处理程序中。
A page can't be manipulated safely until the document is "ready." 在文档“就绪”之前,无法安全地操纵页面。 jQuery detects this state of readiness for you. jQuery为您检测到这种就绪状态。 Code included inside
$( document ).ready()
will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.$( document ).ready()
内包含的代码仅在页面Document Object Model(DOM)准备好执行JavaScript代码后才能运行。
Example 例
$(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>
Use like 使用方式
$(function() {
$('select').on('change', function() {
alert( this.value );
})
});
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.