使用jQuery触发<select>的change事件

Question

有没有办法在页面加载时触发下拉框的更改事件并选择特定选项。

在绑定函数到事件后添加触发器执行函数。

我在尝试输出像这个的东西。

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

- kishanio

---

您想在加载时设置特定选项吗？或者您想触发更改事件吗？ - Manse

你能详细说明最终解决方案吗？你是想在页面加载时强制选择一个选项，还是在选择特定内容时选择不同的选项？ - Matthew Riches

嗨，感谢您的反馈，我已经解决了问题并进行了记录。 - kishanio

Answer 1

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

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

这里有一个示例

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

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

- Joseph

---

同时，在更改选项后，我想执行更改事件函数。关于 这个。应该弹出警告框。 - kishanio

@KishanThobhani 在添加处理程序之后再调用它。请参考示例。 - Joseph

这个解决方案的重要部分是：改变事件处理程序必须在触发器之前声明（很有道理...），在我的情况下就是这个问题，谢谢！ - Larzan

它作为救星帮了我，谢谢@Joseph。 - Divya

在使用前定义了更改函数，解决了我的问题。谢谢。 - Kamlesh

因为JS是一种脚本语言，而脚本语言有一个解释器，如果在绑定事件之前就触发了事件，你的结果可能与预期不符。所以让解释器绑定每个事件，然后再触发它。 ;) - Nitin Shinde

Answer 2

要选择一个选项，在select元素上使用.val('选项的值')。要触发更改元素，使用.change()或.trigger('change')。

您代码中的问题是在$('.check'),trigger('change');中逗号应该是点，并且在绑定事件处理程序之前调用它。

- ThiefMaster

---

使用 .change() 和 .trigger('change') 有什么区别，还是只是语法偏好？ - Joshua Pinter

Answer 3

对于那些被jQuery触发处理程序阻止且不会在本机事件上触发的人的另一种工作解决方案将如下（100％有效）：

另一种适用于那些被jQuery触发处理程序阻止且无法在本机事件上触发的工作解决方案如下（100％有效）：

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

- Mohamed23gharbi

---

我尝试了以上所有方法，但只有这个对我有效。我认为是因为我的选择器在Vue内部。感谢@Mohamed23gharbi！ - Tillito

只有这一个对我起作用。 - Orhan Bayram

事实上，我无法使用jQuery事件处理程序从SELECT发送更改事件，而这个方法却完美地解决了这个问题。 - Francesco Marchetti-Stasi

Answer 4

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

它会改变具有id="edit_user_details"的select HTML标签下拉项。

- Sohail xIN3N

Answer 5

在选项标签的值中提供链接

<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

Answer 6

如果你想进行一些检查，那么可以使用这种方式。

 <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

Answer 7

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

- Tillito

Answer 8

你可以尝试以下代码来解决你的问题。

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

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

- Ketan Tambekar