看了网上的资料也比较杂,自己也做一个整理共享一下解决方案
1.原生js的改变之后手动添加监听
<body>
<input type="hidden" id="ttt" /><br/>
<select id="eee" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
<script type="text/javascript">
var ttt = document.getElementById("ttt");
var eee = document.getElementById("eee");
eee.onchange=function (){
ttt.value=eee.value;
ttt.addEventListener("input",changeValue(),false);
}
function changeValue(){
alert(ttt.value);
}
</script>
需要注意的是,ttt添加的监听的方法名一定要加(),就是在eee的change事件触发的是否给ttt赋值,并且手动触发ttt的change事件
2.添加自定义属性触发事件(推荐)
<body>
<input type="hidden" id="ttt" /><br/>
<select id="eee" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
<script type="text/javascript">
var ttt = document.getElementById("ttt");
var eee = document.getElementById("eee");
eee.onchange=function (){
ttt._value=eee.value;
}
Object.defineProperty(ttt,"_value",{
configurable:true,
set:function(value){
this.value = value;
changeValue();
},
get:function(){
return this.value;
}
});
function changeValue(){
alert(ttt.value);
}
</script>
这种方式不需要添加监听,是通过添加自定义属性并且在自定义属性的set方法里触发input的值改变事件
3.jquery的手动触发input改变事件
<body>
<input type="text" id="two" /><br/>
<select id="three" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="hidden" id="one" />
<input type="hidden" id="four" />
<input type="text" id="five" />
</body>
<script type="text/javascript">
$("#two").on("change",function(){
~!($("#one").val())>-2 ? alert($("#one").val()) : ($("#one").on("change",function(){
alert($(this).val());
}));
});
$("#three").on("change",function(){
$("#two").val($(this).val());
$("#two").change();
});
var index = 0;
setInterval(function(){
index ++;
$("#five").val(index);
if (index == 10) {
$("#one").val($("#three").val());
$("#one").change();
}
},1000);
</script>
这种方式是在值改变的时候手动触发change事件,这里的代码是select框的值改变了,并且当#one这个input框有值了才触发,就是满足两个事件才执行