当选择的选项是已经选择的下拉菜单选项时如何接收事件？ [英] How to receive an event when selected option is the already selected option of a dropdown?

问题描述

动机：

我想动态加载一个 select 来自AJAX调用的值，并允许用户选择列表中的第一个项目，一旦它被载入，在之后获得焦点，现在，第一个项目是选定的项目当你点击下拉菜单并点击第一项时，什么都不会发生。

问题：

您如何开火在当前选择的选项被重新选择/未被更改时，jQuery中的 .change 事件

给出以下内容： / p>

 < select id =myoptions> 
< option id =one>选项1< / option> 
< option id =two>选项2< / option> 
< / select> 
  

假设选择了一个，并且我点击下拉菜单并选择 一个再次发生什么事件？

<$ p $ （$（$'$ $ $ $ $ $'$'$'$）$如果我选择了不同的东西，但是如果我选择当前选择的选项，则不会发生任何事情。


b $ b

换句话说：

如果我点击下拉菜单并选择 当前选择的选项，如何获得一个事件触发？

不应答：

触发器不是解决方案，我需要点击 时触发的选项。选项1 < 选项1 已经是选定的选项。

我试过使用 code> .click 然后没有任何反应

选择下拉菜单时，没有任何答案是针对第一次使用案例的工作解决方案。 >选择默认选择的选项。没有任何反应。

focusout 不是一个解决方案，直到有人点击其他地方才会发生，这是 第一个工作解决方案：你必须明确地将第一项设置为一个选定的状态。

  < select id =myoptions> 
< option id =oneselected =selected>选项1< / option> 
< option id =two>选项2< / option> 
< / select> 
  

然后在JavaScript中，您必须明确地删除 selected 属性。

  $（'＃myoptions option：selected'）。removeAttr（'selected'）; $（$＃
 $（＃myoptions）。on（change，function（）{
 console.debug（$（'＃myoptions'）。find（'option：selected'）） .val（））; 
}）; 
  

这会在初始化时显示空白/空白下拉框。由于没有选项选择了 属性了。

这样做的好处是可以让空白的占位符选择看起来没有实际的空白占位符，并且在选择时编写所有卷积逻辑来处理。

CodePen解决方案的工作示例。 确保并在您点击链接之前打开JavaScript调试控制台，否则您将看不到所需的效果。

这仍然不能解决 reselection 问题，以至于很多其他人询问过哪个是类似的问题，我希望将它作为 refresh 机制使用，但我将在另一个问题中解决这个问题。 / p>

Motivation:

I want to dynamically load a select with values from an AJAX call, and allow the user to select the first item in the list once it is loaded and after it gets focus, right now, the first item is the selected item and when you click the dropdown and click the first item nothing happens. I can't add any placeholder items that are not valid selections.

Question:

How do you fire the .change event in jQuery when the currently selected option is reselected / not changed?

Given the following :

<select id="myoptions">
  <option id="one" >Option 1</option>
  <option id="two">Option 2</option>
</select>

Assuming that option one is selected, and I click on the dropdown and select one again, what event fires?

$('#myoptions').change(function() {
    alert('You selected something!');
}

The above code works if I select something different, but if I select the currently selected option nothing happens.

In other words :

If I click on the dropdown and "select" the currently selected option, how do I get an event to fire?

Not Answers:

All these suggestions about trigger are not solutions, I need something that fires when I click on Option 1 with the mouse when Option 1 is already the selected option.

I tried using .click and nothing happens then either.

None of the answers is a working solution for the use case of the very first time the dropdown is selected, and someone selects the default selected option. Nothing happens.

focusout is not a solution, it doesn't happen until someone clicks somewhere else, which is too late in the game.

解决方案

Working Solution:

First you have to explicitly set the first item to a selected state.

<select id="myoptions">
  <option id="one" selected="selected">Option 1</option>
  <option id="two">Option 2</option>
</select>

Then in your JavaScript you must explicitly remove the selected attribute.

$('#myoptions option:selected').removeAttr('selected');

$("#myoptions").on("change", function(){
    console.debug($('#myoptions').find('option:selected').val());
});

This will then show a blank/empty drop down box on initialization. Which will allow you to select the first item in the list the first time you click on the dropdown because no option has the selected attribute anymore.

This has the benefit of having the look of a blank placeholder selection without actually having to have one and write all the convoluted logic to handle when it gets selected.

CodePen working example of the solution. Be sure and have your JavaScript debug console open before you click on the link or you won't see the desired effect.

This still doesn't solve the reselection issue that so many other people have asked about which is a similar problem, which I would like to use as a refresh mechanism, but I will tackle that in another question.

这篇关于当选择的选项是已经选择的下拉菜单选项时如何接收事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！