js动态改变input的值不触发input的change事件的解决办法

最新推荐文章于 2024-03-19 10:28:51 发布

weixin_34414650

最新推荐文章于 2024-03-19 10:28:51 发布

阅读量1w

点赞数 1

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/ThreeTiger/blog/1620531

版权

2019独角兽企业重金招聘Python工程师标准>>>

看了网上的资料也比较杂，自己也做一个整理共享一下解决方案

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框有值了才触发，就是满足两个事件才执行

转载于:https://my.oschina.net/ThreeTiger/blog/1620531