javascript 如何在具有相同值的下拉列表中触发 jQuery 更改事件

How to trigger jQuery change event on dropdown with same value

提问by Superman

How can I trigger the jQuery change event every time even when user selects the same value? I need a refresh effect e.g if a user select Lawyerand it alert hellothen again user select Lawyerfrom the dropdown and it should alert hello. How can I achieve it? Following is the code.

即使用户选择相同的值，我如何每次都触发 jQuery 更改事件？我需要刷新效果，例如，如果用户选择Lawyer并且它提醒hello然后用户再次从下拉列表中选择Lawyer并且它应该提醒hello。我怎样才能实现它？以下是代码。

jQuery

jQuery

function filterPullDown () {
    alert('hello');
}
$(".businessTypePullDown").change(filterPullDown);

HTML

HTML

<select class="businessTypePullDown">
    <option value="" disabled selected>Business Type</option>
    <option value="1">General</option>
    <option value="2">Lawyer</option>
    <option value="3">Software Development</option>
    <option value="4">Auto-repair</option>
</select>

Link to fiddle

链接到小提琴

采纳答案by skay-

This should work. Its a combination of flags and click events. It will always get triggered when you click on an option.

这应该有效。它是标志和点击事件的组合。当您单击一个选项时，它总是会被触发。

<select class="businessTypePullDown">
    <option value="" disabled selected>Business Type</option>
    <option value="1">General</option>
    <option value="2">Lawyer</option>
    <option value="3">Software Development</option>
    <option value="4">Auto-repair</option>
</select>

(function () {

  var filterPullDown = function() {
         alert('clicked');   
    }
    var flag = false;
    $(".businessTypePullDown").click(function () {
        if (flag) {
            filterPullDown()
        }
        flag = !flag;
    });

    $(".businessTypePullDown").focusout(function () {
        flag = false;
    });
}());

回答by z1md4wg

I think @MrUpsidown had just answered the question without knowing it! Why not add the event handler on the option element itself rather than the outer select element attribute.

我认为@MrUpsidown 刚刚在不知情的情况下回答了这个问题！为什么不在选项元素本身而不是外部选择元素属性上添加事件处理程序。

Going back to Superman's code, use this:

回到超人的代码，使用这个：

$(".businessTypePullDown option").on("click", filterPullDown);

That will invoke the 'filterPullDown' function EVERY time, no matter whether the same value is selected.

无论是否选择了相同的值，这都会每次调用“filterPullDown”函数。

回答by thysultan

Hope this helps someone.

希望这可以帮助某人。

So once the user clicks the select the following code will make the disabled option the selection thus mimicking a state whereby the user is making a change in their selection, and since the .change()event on <select>only fires if the selection option is changed(doesn't remain the same) and the user cannot select a disabled option this insures that the change event always happens, you can then just attach a callback to .change()event of the select.

因此，一旦用户单击选择，以下代码将使禁用选项成为选择，从而模仿用户在其选择中进行更改的状态，并且由于仅在选择选项更改时才会触发.change()事件<select>（不保留相同）并且用户无法选择禁用选项，这确保更改事件始终发生，然后您可以将回调附加到.change()选择事件。

$('select').on('click', function () {
   $(this).find('option').attr('selected', false);
   $(this).find('option:disabled').attr('selected', true);
   // replace options:disabled to options:first-child
   // if you don't want to pollute the select options. 
});

Using the following html:

使用以下 html：

<select title="Sort By">
   <option disabled>Sort By</option>
   <option selected>Name</option>
   <option>Date</option>
   <option>Price</option>
</select>

回答by ran

use

利用

$(".businessTypePullDown>option:not(:disabled)").click(filterPullDown);

$(".businessTypePullDown>option:not(:disabled)").click(filterPullDown);

http://jsfiddle.net/68k31zct/14/

http://jsfiddle.net/68k31zct/14/

回答by code-jaff

simply

简单地

function filterPullDown () {  
  console.log(this.selectedIndex);
}

$(".businessTypePullDown").on('click', filterPullDown);

http://jsbin.com/cunoxawemu/1/edit?js,console,output

http://jsbin.com/cunoxawemu/1/edit?js,console,output