HTML drop down list

Question

How do I create a html drop down list that refreshes back to the option disabled tag once an individual has selected an option value, has viewed their selection and has decided to go back to make another option value selection.

html:

<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>

The -select name- tag renders the user to a URL which opens in the same window.

<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">

As it currently stands if an individual makes a selection from the list, views their selection (opened in the same window) and returns (to the original webpage), the drop down menu does not revert to:

<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>

but remains on the option value tag selection unless they refresh/reload their browser window.

you would need to use jquery to do something like that – Andrew Apr 30 '13 at 13:40 — Andrew, Apr 30 '13 at 13:40

Brett · Accepted Answer · 2013-05-01T02:11:57.027

Basically, you can't do it without javascript.

I don't know how much you know, so I'll assume you have no prior knowledge of javascript.

The following should do what you're asking.

As you can see, I've changed the onchange attribute to call a javascript function called "ResetToDisabled" which passes the DropDown list as a parameter, using the "this" keyword.

<select name="URL" onchange="ResetToDisabled(this);">
    <option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
    <option value="LINK">Ingham County (Google Map / PDF)</option>
    <option value="LINK">Clinton County (PDF)</option>
    <option value="LINK">Eaton County (PDF)</option>
</select>
<script type="text/javascript">
    function ResetToDisabled(DropDown) {
        var TargetIndex = DropDown.selectedIndex;
        DropDown.selectedIndex = 0;
        window.location.href = DropDown.options[TargetIndex].value;
    }
</script>

What is happening here, is that I'm creating a javascript function called "ResetToDisabled" which takes in an object (in this case we can assume it will be a drop down list) as a parameter.

This function, creates a temporary variable called "TargetIndex" and sets it's value to be the selected index of the drop down.

Then it sets the drop down list's selected index to 0 (the first option).

Then it will execute your line of code, where you open a new web page. However since you've reset the drop down back to the first option, when you click back, it will remember that as the option that was selected.

I also feel that I should add. It looks like you're trying to achieve the same behavior that a lot of sites use for their menus; if that's the case, you may want to search "CSS Drop Down Menu" as you'll find it very difficult to change the look of an select drop down if you try to do that later on.

Thank you for your answer. However I have tried the code you added and it does not seem to render the function and direct the user to a URL. — Lew, Apr 30 '13 at 14:37
I had looked at the CSS Drop Down Menu option but thought what I chose was more fit for purpose (I would only be adding additional -option values- and URL links/ the look would stay the same). Thank you for the suggestion though. — Lew, Apr 30 '13 at 15:10
Sorry about that, there was a mistake in my code, it was the last line of javascript, it's fixed now. I copied that line directly without checking to make sure it would work. When typed directly into the "onchange" attribute, the "this" keyword was referencing the dropdown, however "this" wouldn't be attached to anything inside of the javascript function. Now it simply uses the dropdown that is passed into the function. — Brett, May 01 '13 at 02:14
Much appreciated Dar Brett & thank you to everybody else for their input. — Lew, May 01 '13 at 14:40

score 0 · Answer 2 · answered Apr 30 '13 at 13:59

you do not need to use jquery for this!

html file;

<form>
<select name="URL" onchange="changeme(this)">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>

js file;

function changeme(mselect ) {
    for (var i = 0; i < mselect.options.length; i++) {
        if (mselect.options[i].selected == true) {
            mselect.options[i].setAttribute('disabled', 'disabled');
        }
        else {
            mselect.options[i].removeAttribute('disabled');
        }
    }
}

score 0 · Answer 3 · edited May 23 '17 at 12:28

Depending how they are navigated back to the page, you should be able to just have a little bit of Javascript setting the selected index on page load.

YourHTMLElement.selectedIndex = 0;

I will note however, for it to still have the same value selected it sounds like you are navigating back with history.back(); and this will likely not perform the usual onload events.

I did however find the answer here helpful for such an issue though. It would allow jQuery's document ready event to fire which means you could link it up to reset the selectedIndex to 0.

HTML drop down list

3 Answers3