Jump to content
mboehler3

Disabling an option from a select dropdown?

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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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>:)

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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? Edited by mboehler3

Share this post


Link to post
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).

Share this post


Link to post
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>

Share this post


Link to post
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);">

Share this post


Link to post
Share on other sites

what I said... :):)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...