Disabling an option from a select dropdown?

[mboehler3]

Hi, I have a dropdown list with many options and when the user selects an option, they are taken to a specific page. However my first option in the list is something like "Select from these options." While that is an option, I don't want the user to click there. If they do, I don't want them to be taken anywhere. How can I make this happen? I've looked on pages and found the "disabled" element, but when I add disabled="disabled" to my select tag, nothing happens.Thanks in advance for your help.

[thescientist]

so an action is being processed based on which option the user selects, right? I've done it where the event handler calls a function onchange and passes this.value. However, I gave no value to the first option (the one that would say something like "select from the list" or whatever") and thus prevents my AJAX function from firing for that particular option.

[mboehler3]

so an action is being processed based on which option the user selects, right? I've done it where the event handler calls a function onchange and passes this.value. However, I gave no value to the first option (the one that would say something like "select from the list" or whatever") and thus prevents my AJAX function from firing for that particular option.

Well here is a snippit of my code:

<option selected="selected">Select Your State</option><option value="alabama.asp">Alabama</option><option value="alaska.asp">Alaska</option><option value="arizona.asp">Arizona</option>

So all of the options will take the user to a page. But the first option, when clicked, takes the user to "Select Your State," which doesn't exist. I want to make it so, when the Select Your State option is clicked from the dropdown list, nothing happens.

[real_illusions]

Use an <optgroup> tag:<optgroup label="Select Your State"><option value="alabama.asp">Alabama</option><option value="alaska.asp">Alaska</option><option value="arizona.asp">Arizona</option></optgroup>

[HTML5]

Try something like this:The CSS:

#menu ul {         margin-left: 152px;		 margin-right: 152px;		}		#menu li {        list-style-type: none;		border: black 1px solid;		width: 150px;		text-align: center;		background-color: #888888;		float: left;	   }	   #menu a {        text-decoration: none;		color: #000000;		display: block;	   }		   #menu a:hover {              background-color: #444444;			  color: #FFFFFF;			 }#menu li ul {          display: none;		  margin-left: -2.5em;		 }		 #menu li:hover > ul {                  display: block;				 }				 #menu li li li {           margin-left: 10px;		  }

HTML:

<div id="menu">                         <!--UL: This is a ordinary list but transformed in a working navagational menu all by CSS-->	    		<ul>		  <li><a href="index.html">Go here</a></li>		  <li>Pictures		    <ul>		      <li>Select from these options</li>		      <li><a href="qbc.html">1</a></li>		      <li><a href="nbk.html">2</a></li>	  	      <li><a href="nvs.html">3</a></li>			  <li><a href="pei.html">4</a></li>		      <li><a href="nfl.html">5</a></li>		    </ul>		  </li>		  <li>Videos		    <ul>		      <li>Select from these options</li>		      <li><a href="vqbc.html">6</a></li>		      <li><a href="vnbk.html">7</a></li>		      <li><a href="vnvs.html">8</a></li>		      <li><a href="vpei.html">9</a></li>		      <li><a href="vnfl.html">10</a></li>		    </ul>	  	  </li>		</ul>			  </div>

[HTML5]

Oh opps I just relised that you probbly mean't a drop down list like you use in fieldsets. If that is the case the guy above should be right

[ShadowMage]

Well here is a snippit of my code:

<option selected="selected">Select Your State</option><option value="alabama.asp">Alabama</option><option value="alaska.asp">Alaska</option><option value="arizona.asp">Arizona</option>

So all of the options will take the user to a page. But the first option, when clicked, takes the user to "Select Your State," which doesn't exist. I want to make it so, when the Select Your State option is clicked from the dropdown list, nothing happens.

Are you using javascript to redirect the user? If so, can we see the code for that?

[thescientist]

Well here is a snippit of my code:

<option selected="selected">Select Your State</option><option value="alabama.asp">Alabama</option><option value="alaska.asp">Alaska</option><option value="arizona.asp">Arizona</option>

So all of the options will take the user to a page. But the first option, when clicked, takes the user to "Select Your State," which doesn't exist. I want to make it so, when the Select Your State option is clicked from the dropdown list, nothing happens.

doesn't tell us much, as ShadowMage pointed out. Here's what I've done (this code is generated by PHP, fwiw)

<select name='artists' onchange='viewArtist(this.value)'><option selected='selected'>Choose an artist...</option>  <option value='Audio+Kickstand'>Audio Kickstand</option>  <option value='Dave+Flamand'>Dave Flamand</option>  <option value='Electro+Calrissian'>Electro Calrissian</option>  <option value='Laurent+Bonetto'>Laurent Bonetto</option>  <option value='Rory+Boyan'>Rory Boyan</option>  <option value='Various+Artists'>Various Artists</option></select>

and then my viewArtist function just checks the value of this and dispatches accordingly. But, if there's nothing there, as in the case of the first option, then my function won't do anything.

[mboehler3]

Are you using javascript to redirect the user? If so, can we see the code for that?

No there is no JavaScript being used. Can I use it to accomplish what I'm trying to do?

[ShadowMage]

No there is no JavaScript being used. Can I use it to accomplish what I'm trying to do?

Yes you can use javascript. If you're not already, how are you redirecting users? Do you have <a> tags in your select? Post the entire select (you don't need to include all the options with it).

[mboehler3]

Yes you can use javascript. If you're not already, how are you redirecting users? Do you have <a> tags in your select? Post the entire select (you don't need to include all the options with it).

Here's what I have:

<form name="form1">	<select id="mydropdown" name="select1" size="1" OnChange="location.href=form1.mydropdown.options[selectedIndex].value">	<option selected="selected">Select Your State</option>	<option value="alabama-payroll.asp">Alabama</option>	<option value="alaska-payroll.asp">Alaska</option>	<option value="arizona-payroll.asp">Arizona</option>	<option value="arkansas-payroll.asp">Arkansas</option></select></form>

[ShadowMage]

So you are using JavaScript, then. Ok, take the JS out of the onchange and put it in a function in the head of your document. In that function you check the value of the select and if it's blank, do nothing. So,

<script type='text/javascript'>function redirect(newLoc) {   if (newLoc != '') {	  location.href=newLoc;   }}</script>....<!-- Then your select would look like this instead: --><select id="mydropdown" name="select1" size="1" OnChange="redirect(this.value);">

[thescientist]

what I said...

[mboehler3]

Great, that code works perfectly. Sorry for the confusion and thanks for your patience and help!