Click already selected option in select box

Question

This seems like it should be easy, but the limitations of the <select> object are rather irritating. I have a select box with four options, and when you navigate to a page, the option is set to the page you are on. I want to make it so that the user can refresh the page by selecting the same option - that is, selecting the option that's already selected.

Unfortunately, the onclick event doesn't work across browsers. Most people recommend using onchange, but that doesn't work in the case I'm talking about. The approach I've been taking is to add an extra item at the top that holds what's currently selected and does nothing when clicked on, and then switch to that option after firing the onchange event, so that when the user re-selects the option they're actually changing. That's awkward though, because in the drop-down there are two of the same item, and I shouldn't have to do it.

What is a good cross-browser way to solve this problem? Something not terribly complicated and something in regular JavaScript would be preferable.

Your way to refresh the site doesn't seem very good from the user interface point of view. Making something more simple for the user will also make it more simple for you to code it. Just think about it :) — Alvaro, Dec 07 '12 at 16:50
I agree with Steve. This is a non-standard use of the select box control. You are better of using a small refresh icon somewhere (or let the user hit F5). — Kevin Boucher, Dec 07 '12 at 16:51
It's not my idea, but when I was doing hallway usability testing people kept trying to do it to clear their choices. — Andrew Latham, Dec 07 '12 at 17:24
Possible duplicate question here: http://stackoverflow.com/q/647282/981208 — FixMaker, Dec 07 '12 at 17:27

score 0 · Answer 1 · edited Dec 11 '17 at 12:37

This might help:

function onFocus(element){
    element.setAttribute('old-value',element.value);
    element.value='';
    console.log('reset');
}

function onBlur(element){
    if(element.value=='')
        element.value = element.getAttribute('old-value');
    element.removeAttribute('old-value');   
}

function onChange(element){
    console.log('New Value : '+ element.value);
}

<select id="mySelect"  onfocus="onFocus(this)" onchange="onChange(this)" onblur="onBlur(this);">
    <option value="" style="display:none;"></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

This would be great except that the user has to click outside the select box after making their selection. — Andrew Latham, Dec 07 '12 at 17:59

score -1 · Answer 2 · answered Dec 07 '12 at 20:26

-1

Here you go with the solution

$("select[id=mySelect] option").click(function(){
    alert("HI");
});

This will alert -HI- everytime a click is made on an option. The change has also been made in the select box and event is also been performed.

answered Dec 07 '12 at 20:26

anuj arora

831
12
22

Click already selected option in select box

2 Answers2

Linked