使用jQuery触发更改事件<选择>

145

无论如何，我是否可以在页面加载的选择框上触发更改事件并选择特定选项。

另外，通过将函数绑定到事件后添加触发器来执行函数。

我试图输出像这样

<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/

jquery

— 基沙尼奥
source

您是否要在加载时设置特定选项？还是您想触发变更事件？

— Manse'5

您能否扩展最终解决方案。您是要在页面加载时强制使用某个选项，还是在选择特定内容时选择其他选项？

— 马修·里奇斯

嗨，感谢您的反馈，我能够解决问题并记录下来。

— kishanio

287

使用val()更改到值（不是文本）和trigger()手动触发事件。

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

这是一个样本

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

$('.check')
    .val('two')
    .trigger('change');

— 约瑟夫
source

同样在更改选项之后，我想执行更改事件功能。WRT 此。警报框应执行。

— kishanio

@KishanThobhani，您应该在添加处理程序后调用它。参见示例。

— 2012年

7

该解决方案的重要部分是：必须在触发器之前声明更改事件处理程序（有意义……），在我看来，这就是问题所在，谢谢！

— 拉赞（Larzan）2016年

它帮助了救世主，谢谢@Joseph

— Divya，

在使用之前定义的更改功能，解决了我的问题。谢谢。

— 卡姆列什

27

要选择一个选项，请.val('value-of-the-option')在select元素上使用。要触发更改元素，请使用.change()或.trigger('change')。

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

— 盗贼大师
source

10

$('#edit_user_details').find('select').trigger('change');

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

— 索海尔xIN3N
source

6

对于那些被jQuery触发器处理程序阻止的人来说，另一个可行的解决方案是，对本机事件的触发可能如下（100％正常工作）：

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

— 穆罕默德·加尔比
source

1

我尝试了以上所有方法，但只有这一方法对我有效。我认为是因为我的选择是在vue内。谢谢@ Mohamed23gharbi！

— Tillito

1

同样在这里。这是我一直在寻找一个小时的解决方案。谢谢。

— mberna

1

这是答案！

— 火星

1

提供选项标签值的链接

<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>

— 阿夫拉兹·艾哈迈德（Afraz Ahmad）
source

1

如果您想进行一些检查，请使用这种方式

 <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>

— 阿夫拉兹·艾哈迈德（Afraz Ahmad）
source

0

根据Mohamed23gharbi的回答：

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创建的，这是唯一可行的方法。

— 蒂利托
source

0

您可以尝试以下代码来解决您的问题：

默认情况下，第一个选项选择：jQuery（'。select'）。find（'option'）[0] .selected = true;

谢谢，Ketan T

— 凯坦·坦贝卡（Ketan Tambekar）
source