HTML drop down list - html

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.

Answer 1

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.

Answer 2

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

Answer 3

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.