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

Answer 2

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

guthub link - angular select

Used element[0].blur(); to remove the focus off the select tag. Logic is to trigger this blur on second click of the dropdown.

as-select gets triggered even when user selects the same value in the dropdown.

DEMO - link

Answer 3

this is maybe not excactly what do you want, but this another alternative that you can decide. after select the option, get it back to default(the empty one/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 make

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

but this way will call your function (alert) when user leave/blur/unfocus the list :p

Answer 4

you can use onclick function and maintain a count for that, once you get same target.value twice, then you can perform your onchange fuctionality there. I have implemented this in Vue.js

Select block:

                          <select
                            id="status"
                            name="status"
                            @change="
                              onChangeStatus(un.id, $event)
                            "
                            @click="
                              onChangeStatus(
                                un.id,
                                $event,
                                'same'
                              )
                            "
                            class="form-control"
                            :value="un.status"
                          >
                            <option value="Uncleaned">Uncleaned</option>
                            <option value="Partially Taken for cleaning">
                              Partially Taken for cleaning
                            </option>
                            <option value="Fully Taken for cleaning">
                              Fully Taken for cleaning
                            </option>
                          </select>

Kept count=0 initially.

I have used same function on both events, checked conditions and returned data accordingly

onChangeStatus(id, e, type) {
  if (type === "same") {
    if (e.target.value === "Partially Taken for cleaning") {
      this.count += 1;
      if (this.count === 2)
        this.$router.push({
          name: "NewPage",
          params: {
            id: id,
            status: e.target.value,
          },
        });
    }
  } else {
    this.$router.push({
      name: "NewPage",
      params: {
        id: id,
        status: e.target.value,
      },
    });
  }
},