Jump to content

Disabling an option from a select dropdown?


mboehler3
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Edited by thescientist
Link to comment
Share on other sites

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).
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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);">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...