javascript - Select already selected item in dropdownselect - list - Stack Overflow

admin管理员组

文章数量:1291125

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 es 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'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 es 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.

• javascript
• jquery
• html
• select
• drop-down-menu

Share Improve this question Follow edited May 12, 2011 at 11:14 xzc asked May 11, 2011 at 12:38 xzcxzc 6111 silver badge33 bronze badges 9

• 1 If you change onchange to onclick does this sort it out for you? – Paddy Commented May 11, 2011 at 12:41
• Could you add more info on why you need this behavior? We might be able to give you a better alternative – JohnP Commented May 11, 2011 at 12:43
• simply once write all the options first and also add one with selected tag. is all options are in array??please explain more – xkeshav Commented May 11, 2011 at 12:46
• 1 #thesupertramp to some extend yes. I have already read that post, but the solutions in it doesnt seem to resolve my issue. Im just about to go nuts as to how hard this can be. If i wont be able to find a solution ill guess a (crappy) solution would be to bind a reset event to the dragend of the google maps. thus resetting the selected index to "please select an item" or something whenever you drag around. my boss wont like that... – xzc Commented May 11, 2011 at 12:59
• 1 Seem"s to me that a reset event ondrag is the way to go and is good usability design. Once you drag away from "Spain" then you are no longer focused on Spain. It doesn't make sense to be on "Italy" but still show "Spain" as the selected country. – NakedBrunch Commented May 11, 2011 at 13:03

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 3

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

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

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

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,
      },
    });
  }
},

本文标签： javascriptSelect already selected item in dropdownselectlistStack Overflow