在下拉列表/选择列表中选择已选择的项目 [英] Select already selected item in dropdown/select - list

问题描述

我一直在寻找这个问题的答案已经有一段时间了，没有运气，或者最大的错误解决方案。

面临的问题是我有一个选择元素（显然）在选择已经选择的项目时不会触发onchange事件。

像这样：

 < select onchange =alert（this.value）;> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
  

现在，说我先选择项目1。
然后，我需要再次选择项目1。

此功能对于我正在开展的项目的成功至关重要。 / p>

非常感谢任何帮助。

编辑：（更多信息） p>

此功能需要使用谷歌地图的项目，用户可以通过下拉列表快速跳到某个国家（例如，您在下拉菜单中选择西班牙）谷歌地图将西班牙作为您的观点。

当您想去西班牙时，问题出现，然后拖动地图，最终到达意大利。回到西班牙，但你不能从下拉列表中选择它，直到你先选择别的东西，我的老板不喜欢这样：）

Edit2：解决方案

所以现在这几个解决方案。
其中一个是抛出动作onblur（当不重视控件时）这个可以工作，因为我可以模糊列表onchange，但仍然为人们再次选择相同的项目，触发器为了模糊控制不会去，除非他们把自己的焦点转移到他们自己，他们不会看到地图的变化。

仍然我不明白为什么它应该这么难找到一些事情，选择选择/点击/模糊或任何..不自觉的事情，然后再检查一下。

编辑3 ：最终解决方案

对了，所以我终于设法让这个工作，而不是完全如此，但足够接近，至少现在无论如何。

我想出的解决方案是在选择的顶部添加一个请选择国家选项。
然后在更改时，我将更改文本，并将请选择国家的值更改为所选项目的值，然后将所选索引重置为0.
这样，在选择西班牙时，它将处于残疾人名单的首位，并处于工作状态。所以现在你可以点击列表中间的西班牙回到西班牙，即使它仍然被选中（最重要的是）

完整的想法被提供来自同事。

脚本如下：

  var dummyOption ; 
函数setdummyCountry（obj）
 {
 var selectedOption = obj.options [obj.selectedIndex]; 
 if（dummyOption！= null）{
 dummyOption.text = selectedOption.text; 
 dummyOption.value = selectedOption.value; 
} 
 else {
 dummyOption = document.createElement（option）; 
 dummyOption.text = selectedOption.text; 
 dummyOption.value = selectedOption.value; 
 dummyOption.setAttribute（disabled，true）; 
 obj.options [0] = dummyOption; 
} 
 obj.selectedIndex = 0; 
} 
 
< select onchange =setdummyCountry（this）;> 
< option value =>请选择国家< / option> 
< option value =ES> spain< / option> 
< option value =SE> sweden< / option> 
< option value =NO> norway< / option> 
< / select> 
  

我希望这会帮助某人！

那些试图帮助我的人感谢你的想法和时间。

解决方案

我认为没有办法改变事件如果选择相同的项目，将会起火。我们面临同样的问题，所以我们做的是一个简单的可用性黑客：当选择项目时，我们向用户显示在跨度中选择的项目，并将下拉列表的值重置为默认值（--Select--）。

HTH

I've been searching for an answer to this question for quite some time now, with no luck, or buggy solutions at max.

The problem im facing is that i have a select element which (obviously) doesn't fire the "onchange" event when selecting the already selected item.

Like this:

<select onchange="alert(this.value);">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Now, say i select item 1 first. Then afterwards i need to be able to select item 1 again.

This feature is extremely important to the success of the project I'm working on.

Any help is greatly appreciated.

Edit: (More info)

This functionality is needed as im working on a project with a google maps where users are presentet with a dropdown to quickly jump to a country (Eg you select "Spain" in the dropdown, google maps sets spain as your view.

the problem comes when you want to go to spain, then drag around the map, and end up in italy. Now you want to go back to spain, but you cant select it from the dropdown until you select something else first. My boss doesn't like that :)

Edit2: Solution

So by now theres a few solution. One of them is to throw the action onblur (when unfocusing the control) this could work, as i could blur the list onchange, but still for people selecting the same item again, the trigger to blur the control wont go, and unless they switch focus by them self, they wont see the changes to the map.

Still i cannot understand why it should be so hard to find some event that excutes on option select / click / blur or whatever.. ill keep looking myself, and check back here a tad later.

Edit 3: Final solution

Right so i finally managed to get this working, not exactly as it was ment to be, but close enough, atleast for now anyways.

The solution i came up with was to add a "Please select country" option at the top of the select. Then on change, i would change the text, and value of "Please select country" to that of the selected item, and reset the selectedindex to 0. This way, when selecting, say, Spain, it will be at the top of the list in a disabled state, and further down in a working state. so now you can click spain in the middle of the list to go back to spain even though it is still selected (the top item is)

Quite neat, idea was supplied from a coworker.

script is as following:

   var dummyOption;
function setdummyCountry(obj)
{
    var selectedOption = obj.options[obj.selectedIndex];
    if (dummyOption != null) {
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
    }
    else {
        dummyOption = document.createElement("option");
        dummyOption.text = selectedOption.text;
        dummyOption.value = selectedOption.value;
        dummyOption.setAttribute("disabled", "true");
        obj.options[0] = dummyOption;
    }
    obj.selectedIndex = 0;
}

<select onchange="setdummyCountry(this);">
    <option value="">Please select country</option>
    <option value="ES">spain</option>
    <option value="SE">sweden</option>
    <option value="NO">norway</option>
</select>

i hope this will help someone!

And to those who tried to help me thank you for your ideas and time.

解决方案

I think there is no way change event is gonna fire if the same item is selected. We were facing the same issue so what we did was a simple usability hack: When an item is selected we show to the user the item selected in a span and reset the value of dropdown to its default value (--Select--).

HTH

这篇关于在下拉列表/选择列表中选择已选择的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！