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

【问题标题】：Trigger change event <select> using jquery触发更改事件<select>使用jquery
【发布时间】：2012-05-19 19:54:40
【问题描述】：

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

也是函数绑定事件后添加触发器执行的函数。

我试图输出类似this

<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

【解决方案1】：

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

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

Here's a sample

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

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

【讨论】：

另外，在更改选项后，我想执行更改事件功能。 w.r.t this。警报框应该执行。
@KishanTobhani 您应该在添加处理程序之后调用它。查看示例。
此解决方案的重要部分是：必须在触发器之前声明更改事件处理程序（有意义...），在我的情况下，这就是问题所在，谢谢！
它作为救世主有所帮助，谢谢@Joseph
在您使用之前定义了更改功能，解决了我的问题。谢谢。

【解决方案2】：

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

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

【讨论】：

使用.change()和.trigger('change')有什么区别，或者只是语法偏好？

【解决方案3】：

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

它会用id="edit_user_details"改变select html标签下拉项。

【讨论】：

【解决方案4】：

对于那些被 jQuery 触发器处理程序阻止的人来说，另一种可行的解决方案是，在本机事件上触发的剂量如下所示（100% 有效）：

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

【讨论】：

我尝试了以上所有方法，但只有这一个对我有用。我想，因为我的选择是在 Vue.js 里面。谢谢@Mohamed23gharbi！

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

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

【讨论】：

【解决方案8】：

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

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

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

【讨论】：