一、jqueryonchange事件
jQuery Onchange事件是一种常用的前端事件。当控件的值改变时,这个事件就会被触发。它常常和其它事件一起被使用,比如点击事件和键盘事件。换句话说,当用户改变了表单元素的值并提交表单时, Onchange 事件就会被触发。
下面的代码演示了一个简单的例子,当选择不同的选项时,会弹出不同的提示。注意,这里使用的是常见的select标签。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<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框中输入内容,并点击按钮时,将会弹出输入的内容。
<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弹出了两次。
<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,以后再触发时跳过即可,如下所示:
<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异步调取数据,根据不同的状态显示对应的数据。
<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>
<input type="text" id="txtInput" />
2、动态选取
当我们需要动态的选取选项时,jquery onchange事件可以直接用来动态选取选项。下面是代码实例,当用户选择不同的选项时,根据不同的选项值显示不同的内容。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
内容1
内容2
内容3
<script>
$(document).ready(function(){
$("#sel").on('change',function(){
// hide all options
$('#option1,#option2,#option3').hide();
// get the selected option
var selected = $('#sel option:selected').attr('id');
// show the selected option
$('#' + selected.replace('opt', 'option')).show();
});
});
</script>
五、总结
在本文中,我们详细的介绍了jquery onchange事件,包括它与原生的onchange事件的区别,以及它的应用场景。希望通过本文的介绍,可以让大家更好地掌握jquery onchange事件的使用方法,并且在日常工作学习中更好地运用它。