Select already selected item in dropdown/select - list

Question

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.

Answer 1

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