一、jqueryonchange事件
jQuery Onchange事件是一种常用的前端事件。当控件的值改变时，这个事件就会被触发。它常常和其它事件一起被使用，比如点击事件和键盘事件。换句话说，当用户改变了表单元素的值并提交表单时， Onchange 事件就会被触发。
下面的代码演示了一个简单的例子，当选择不同的选项时，会弹出不同的提示。注意，这里使用的是常见的select标签。
p{
font-size:24px;
margin: 10px 0;
}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
value1
value2
<script>
$(document).ready(function(){
//当选择的选项改变时触发事件
$("#select1").on('change',function(){
var selectValue = $(this).val();
if(selectValue == "value1"){
alert("您选择的是value1");
}else if(selectValue == "value2"){
alert("您选择的是value2");
}
});
});
</script>
二、jquery onchange事件
jquery onchange事件和原生的onchange事件类似，它是在HTML元素值变更时触发的一个事件，如input文本框的值改变、选择框的值改变或属性的变化等等。当用户修改input框中的文本时，就会触发onchange事件。
下面的代码演示了一个简单的例子，当用户在input框中输入内容，并点击按钮时，将会弹出输入的内容。
p{
font-size:24px;
margin: 10px 0;
}
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<input type="text" id="txtInput" />
<script>
$(document).ready(function(){
$("#txtInput").on("change", function(){
alert("内容发生了变化！");
});
$("#btnClick").on("click",function(){
var text = $("#txtInput").val();
alert(text);
});
});
</script>
三、jquery onchange会触发2次
如果在jquery中绑定onchange事件，它会触发2次，可看如下代码，当我们在文本框中输入内容时，会发现alert弹出了两次。
p{
font-size:24px;
margin: 10px 0;
}
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<input type="text" id="txtInput" />
<script>
$(document).ready(function(){
$("#txtInput").on("change", function(){
alert("内容发生了变化！");
});
});
</script>
解决这个问题很简单，只要在处理事件时让它只运行一次即可。我们可以通过设置一个变量，初始值设为 false，只要第一次触发事件，修改变量为 true，以后再触发时跳过即可，如下所示：
p{
font-size:24px;
margin: 10px 0;
}
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<input type="text" id="txtInput" />
<script>
$(document).ready(function(){
var changed = false;
$("#txtInput").on("change", function() {
if (!changed) {
changed = true;
alert("内容发生了变化！");
}
});
});
</script>
四、jquery onchange事件的用法
jquery onchange事件的用处非常广泛，它可以实现许多有趣的功能，下面举例如下：
1、根据不同的状态加载不同的数据
下面的代码演示了根据选择的选项加载不同的数据，在这里我们需要使用到select联动的方式，主要是通过ajax异步调取数据，根据不同的状态显示对应的数据。
p{
font-size:24px;
margin: 10px 0;
}
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
function loaddata(value)
{
$.ajax({
type: "POST",
url: "test.php",
data:{fl:value},
success: function(data){
$("#txtInput").val(data);
}
});
}
$(document).ready(function(){
$("#select").on('change',function(){
var selectValue = $(this).val();
loaddata(selectValue);
});
});
</script>
value1
value2
<input type="text" id="txtInput" />
2、动态选取
当我们需要动态的选取选项时，jquery onchange事件可以直接用来动态选取选项。下面是代码实例，当用户选择不同的选项时，根据不同的选项值显示不同的内容。
p{
font-size:24px;
margin: 10px 0;
}
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
内容1
内容2
内容3
原创文章，作者：EWEHQ，如若转载，请注明出处：https://www.506064.com/n/370837.html
微信扫一扫 
支付宝扫一扫 