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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10547622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:30:16  来源:igfitidea点击:

Trigger change event <select> using jquery

jquery

提问by kishanio

is there anyway i could trigger a change event on select box on page load and select a particular option.

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

Also the function executed by adding the trigger after binding the function to the event.

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

I was trying to output something like 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/

http://jsfiddle.net/v7QWd/1/

回答by Joseph

Use val()to change to the value(not the text) and trigger()to manually fire the event.

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

The change event handler must be declared before the trigger.

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

Here's a sample

这是一个示例

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

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

回答by ThiefMaster

To select an option, use .val('value-of-the-option')on the select element. To trigger the change element, use .change()or .trigger('change').

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

The problems in your code are the comma instead of the dot in $('.check'),trigger('change');and the fact that you call it before binding the event handler.

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

回答by Sohail xIN3N

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

It would change the selecthtml tag drop-down item with id="edit_user_details".

它会改变选择与HTML标记下拉项id="edit_user_details"

回答by Mohamed23gharbi

Another working solution for those who were blocked with jQuery trigger handler, that dosent fire on native events will be like below (100% working) :

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

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

回答by Afraz Ahmad

Give links in value of the option tag

给出选项标签值的链接

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

回答by Afraz Ahmad

If you want to do some checks then use this way

如果你想做一些检查,那么使用这种方式

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

回答by Tillito

Based on Mohamed23gharbi's answer:

基于 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");
}

In my case, where the elements were created by vue, this is the only way that works.

就我而言,元素是由 vue 创建的,这是唯一有效的方法。

回答by Ketan Tambekar

You can try below code to solve your problem:

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

By default, first option select: jQuery('.select').find('option')[0].selected=true;

默认情况下,第一个选项选择:jQuery('.select').find('option')[0].selected=true;

Thanks, Ketan T

谢谢, Ketan T