使用 jquery 触发更改事件 < select >

是否有无论如何我可以触发一个变化事件在选择框页面加载和选择一个特定的选项。

也是在将函数绑定到事件之后通过添加触发器来执行的函数。

我试图输出类似 这个的东西

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>


$(function(){
$('.check').trigger('change'); //This event will fire the change event.
$('.check').change(function(){
var data= $(this).val();
alert(data);
});
});

Http://jsfiddle.net/v7qwd/1/

343000 次浏览
小开

要选择一个选项，在 select 元素上使用 .val('value-of-the-option')。

代码中的问题是 $('.check'),trigger('change');中的逗号而不是点，以及在绑定事件处理程序之前调用它的事实。

小开
最佳答案

使用 val()更改为 价值(而不是文本) ，使用 trigger()手动触发事件。

更改事件处理程序必须在触发器之前声明。

这是样本

$('.check').change(function(){
var data= $(this).val();
alert(data);
});


$('.check')
.val('two')
.trigger('change');
小开 
$('#edit_user_details').find('select').trigger('change');

它将使用 id="edit_user_details"更改 选择 html 标记下拉项。

小开

在选项标记的值中给出链接

<select size="1" name="links" onchange="window.location.href=this.value;">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
小开

如果你想做一些检查，然后使用这种方式

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
<option value="">Select a Search Engine</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>


<script>


function functionToTriggerClick(link) {


if(link != ''){
window.location.href=link;
}
}


</script>
小开

对于那些被 jQuery 触发器处理程序阻塞的人来说，另一个可行的解决方案是，对本机事件的不触发如下所示(100% 可行) :

var sortBySelect = document.querySelector("select.your-class");
sortBySelect.value = "new value";
sortBySelect.dispatchEvent(new Event("change"));
小开

基于 Mohamed 23gharbi 的回答:

function change(selector, value) {
var sortBySelect = document.querySelector(selector);
sortBySelect.value = value;
sortBySelect.dispatchEvent(new Event("change"));
}


function click(selector) {
var sortBySelect = document.querySelector(selector);
sortBySelect.dispatchEvent(new Event("click"));
}


function test() {
change("select#MySelect", 19);
click("button#MyButton");
click("a#MyLink");
}

在我的例子中，元素是由 vue 创建的，这是唯一可行的方法。

小开

您可以尝试使用下面的代码来解决您的问题。

默认情况下，第一个选项选择:

jQuery('.select').find('option')[0].selected=true;

提交答案