How to reselect already selected option

Question

The title seems confusing but what I want to do is...

I know how to handle only if the user select new option with this - $('select').change(function(){}).`

But not if the user wants to select the already selected option.

I've also tried with radio but same thing.

Okay for example I have a select with an option (red,blue,green).

<select>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

and I have this script:

$('select').change(function(){
    var val = $(this).val();
    alert(val);
});

When I select option 'blue' it alerts a value 'blue', then I select 'green' it alerts 'green' as well. but when I select 'green' again nothing happens.

Answer 1

This question comes to my attention as this is pretty basic stuff but no one actually dig into it further. OP has been using change(), but when you reselect the current selected option nothing is fired!

I tried click(), but it's firing before you can even choose an option.

With blur(), after you're done selecting nothing is fired because the the select element is still being focused, so you need to focus out like clicking outside for it to execute.

So I just suggested OP to switch to a radio type input then handle execution with click() event. That way you can still reselect already marked radio button.

But then I noticed that you just need to get the second click on <select> element because the first click opens the drop down list of options the second click returns the value of your selected option. So I came up with this:

$('select').click(function(){
    var $this = $(this);

    if ($this.hasClass('open')) {
        alert($this.val());
        $this.removeClass('open');
    }else {
        $this.addClass('open');
    }  
});

But now the problem is when you first click on <select> the drop down is being showned and we've also added the class 'open'. Then clicking elsewhere (without selecting an option) the drop down is hidden so when you click back on <select> the event is fired before you can even select an option.

So I added this code to fix that:

$(document).click(function(e){
   var $select = $('select');

    if (!$select.is(e.target)){
        $select.removeClass('open'); //reset the steps by removing open
    }
});

You can test it out in this jsfiddle. Cheers!

---

I think when <select> loses its focus is also a concern. So I added blur() event. See this update jsfiddle

Answer 2

In instances where nothing should happen when the user selects the already-selected option I suppose it is a "feature" of the DOM rather than a bug to have no Event occur. However, if your code is doing more with <select> than making a simple selection it is also a nuisance, so I'm grateful others have tackled it here.

The current accepted answer is clever in the use of the click event to capture selection of an already selected <select> option, but if you are willing to specify the length of your list as (in this case) <select size=3>, you can simply set the selected value to "" from your "change" Event, and the same selection will trigger every time.

In this case the OP's example would change to:

HTML:

<select size=3>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

jQuery:

$('select').change(function(){
    var val = $(this).val();
    alert(val);
    $('select').val("");
});

The only side-effect is that the selection element may now display to the user as three rows rather than one.

(Credit goes to Kirby L. Wallace for the idea of setting the select's value to "").

Answer 3

i solved using 'onclick=this.value=-1' that reset the selection to nothing...