关于js的onchange事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于js的onchange事件相关的知识，希望对你有一定的参考价值。
最近用微擎开发微信公众号模块，遇到一个问题。里边有个控件，是直接能获取地址（省、市、区）的，但控件是写死的，在前台代码中看到就是一个input域，我希望当用户选完地址直接获取值进行ajax进行地址搜索相关信息
问题来了：如果我IDE中是input而非一个微擎控件，我可以直接在input加上onchange属性并绑定相应函数，实现我的意图，但控件的话，我是想询问各位大神，是否有办法直接用js编写类似onchange的js方法，（前端控制台代码可以看到input的class） 这样我就能直接用js写而不用受制于地区选择组件？问题解决可以加分
虽然我没用过微信的控件，但根据你说的，浏览器的开发者工具能看到控件最终生成的input和class，那么你直接用on 预绑定事件不就行了？
jQuery on：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
$(document).on('change','input.class',function()alert();
);追问
$(document).on('change',"input[name='address[province]']",function()
console.log('hello');
);
我写成这样，但是当input[name='address[province]']这个input值改变时，控制台无变化，说明这个函数没生效。。。
//是否大于0,或者使用$("input[name*='address']").length 试试 参考技术A 时间插件对文本杠值的修改一般是通过js去修改，这种方式是不会触发onchange事件的，你可以在时间修改时通过手工触发的方式达到你要的效果
PS:
ie可以通过onpropertychange实现你要的效果，但其它浏览器就只能另外写方法去实现了
关于下拉框的onchange事件和onclick选择value值。
下拉框的onchange事件和onclick，一般最好都选择onchange事件，onclick可能会不兼容有些浏览器。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<script src="js/lib/jquery/v1.12.3/jquery-1.12.3.js"></script>
<style>
#one {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 20px;
}
#two {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 61px;
}
#three {
border: 1px solid salmon;
width: 40px;
height: 100px;
position: absolute;
left: 102px;
}
</style>
<script>
function showlist(optvalue){
if(optvalue=="1"){
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else if(optvalue=="2"){
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
</script>
</head>
<body>
<div id="one">
<select name="" id="select1" onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="two">
<select name="" id="select2"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<div id="three">
<select name="" id="select3"
style="display: none"
onchange="showlist(this.value)">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<script>
$( document ).ready( function()
{
//这是onclick事件可能有些不兼容，不推荐使用
/*var sel = $( "select" );
var option = sel.children();
console.log( option );
for( var i = 0; i < option.length; i++ )
{
option[ i ].onclick = function()
{
alert( this.value );
if( this.value ==1 )
{
$( "#select1" ).show();
$( "#select2" ).hide();
$( "#select3" ).hide();
}
else
if( this.value ==2 )
{
$( "#select2" ).show();
$( "#select1" ).hide();
$( "#select3" ).hide();
}
else
{
$( "#select3" ).show();
$( "#select1" ).hide();
$( "#select2" ).hide();
}
}
}*/
} );
</script>
</body>
</html>
以上是关于关于js的onchange事件的主要内容，如果未能解决你的问题，请参考以下文章
html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value