Geek Answers Handbook

Select an already selected item in the drop-down list / select - list

I have been looking for the answer to this question for quite some time, with no luck, or with errors in max.

The problem im encounters is that I have a select element that (obviously) does not fire the "onchange" event when an already selected element is selected.

Like this:

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

Now, let's say I first select item 1. Then after that I will need to select item 1 again.

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

Any help is greatly appreciated.

Edit: (Additional Information)

This functionality is necessary, since im is working on a project with google maps, where users are presented with a drop-down list in order to quickly go to the country (for example, you selected "Spain" in the drop-down list, google maps display evaporation as your presentation.

the problem arises when you want to switch to evaporation, then drag and drop the card and find yourself in Italy. Now you want to return to Spain, but you cannot select it from the drop-down list until you first select something else. My boss doesn't like it :)

Edit2: Solution

So now there are several solutions. One of them is to throw the onblur action (with uncontrolled control), this may work, since I can blur the onchange list, but for people who select the same item again, the trigger to blur the control will not and if they don’t switch focus on themselves, they don’t see the changes on the map.

However, I can’t understand why it is so difficult to find some kind of event that emits the select / click / blur option or something else .. badly keep looking for yourself and come back a little later.

Edit 3: Final Solution

That's right, so I finally managed to get it to work, not as it should have been, but close enough, at least for now, to something.

The solution I came across was to add the option "Please select a country" at the top of the selection. Then, when changing, I would change the text and the value "Please select a country" with respect to the selected item, and reset selectedindex - 0. Thus, if you select, say, in Spain, it will be at the top of the list in the disabled state and on in working order. so now you can click spain in the middle of the list to return to the drop, even if it is still selected (top element)

Completely neat, the idea was provided by a colleague.

The script looks like this:

  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>

Hope this helps someone!

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

+4
source share
3 answers

I think that if the same item is selected, a change event will occur. We faced the same problem, so we made a simple usability manipulator: when an element is selected, we show the user the element selected in the range and reset the default drop-down list value (--Select--).

NTN

+2
source

This may not be exactly what you need, but it is another alternative that you can solve. after selecting an option, return it to the default (empty / first) option

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

or you can do

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

but this method will call your function (warning) when the user leaves / blurs / expands the list: p

+1
source

I was looking for a solution for the same scenario and ended up writing an angularjs directive for the same -

guthub link - angular select

Used by element[0].blur(); to remove focus from the select tag. Logic triggers this blur on the second click of the drop-down list.

as-select runs even when the user selects the same value from the drop-down list.

DEMO - link

+1
source

More articles:


All Articles