如何在具有相同值的下拉菜单上触发 jQuery 更改事件答案

【问题标题】：How to trigger jQuery change event on dropdown with same value如何在具有相同值的下拉菜单上触发 jQuery 更改事件
【发布时间】：2015-03-22 09:24:03
【问题描述】：

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

jQuery

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

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

【问题讨论】：

$(".businessTypePullDown").click(function(){// perform required operation});
:) 它甚至不会让用户选择任何值。 @PramodKarandikar
@briosheje 我可能知道。但是如何做到这一点要么需要 SO 的回答，要么需要努力唤醒我的记忆。 :)
你真的有任何证据证明这是可能的吗？我不是说它不是，我只是注意到它实际上似乎不可能将任何类型的什至附加到

标签： javascript html jquery jquery-events

【解决方案1】：

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

<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;
    });
}());

【讨论】：

我很欣赏您实现该功能的方法。但这更像是一种技巧，而不是解决方案。仍在寻找更改事件增强功能。如果没有人提供更改事件修复，我会接受这个答案。谢谢 Stelios。
还请更正自调用函数右括号。我认为应该是这样})(); 而不是}());
@Superman 我这样做的方式也很有效，只是风格不同:) 顺便说一句，我认为不可能使用更改“事件”......根据定义，当你在 select 元素中选择相同的选项，因此我认为任何其他方法仍然是一个 hack。
但我还是很好奇。但是，您的方法很好，而且是一个巧妙的技巧。

【解决方案2】：

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

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

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

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

【讨论】：

这个想法真的很有帮助！即使用户单击已选择的值，我也需要找到一种方法来分散 IE 和 Edge 浏览器中的下拉选项。这成功了。就我而言，我已将 $(this).parent().blur(); 放入调用的函数中。

【解决方案3】：

使用

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

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

【讨论】：

这行不通。我不知道这还需要什么评论。

【解决方案4】：

希望这对某人有所帮助。

因此，一旦用户单击选择，以下代码将使禁用选项成为选择，从而模仿用户更改其选择的状态，并且由于 <select> 上的 .change() 事件仅在选择选项已更改（不保持不变）并且用户无法选择禁用的选项，这可确保更改事件始终发生，然后您可以将回调附加到选择的 .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. 
});

使用以下html：

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

【讨论】：

【解决方案5】：

简单

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

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

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

【讨论】：

这不是我们想要的行为。
@MrUpsidown 不想要是什么意思？您介意详细说明一下吗？
每次点击<select> 元素时，您的代码都会触发该函数。他希望在单击<option> 时发生一些事情。再读一遍。