HTML - Dropdown Select Problem

I have what I hope is a simple problem with an HTML dropdown form.

How do I make my top, default value "Choose" unclickable? I want it to be the title inside my dropdown, not a submittable option.

Here is the code in my test example.
Code:

<form method="post"action="http://www.phoenixarizonanetwork.com/cgi/redir.pl">
  <select name="url">
    <option value="test.htm">Choose</option>	
    <option value="../cats.htm">Cats</option>
    <option value="../dogs.htm">Dogs</option>
    <option value="../rabbits.htm">Rabbits</option>		
  </select>
  <input type="submit" value="Go" />
</form>

Here is a link to my test example.
http://www.phoenixarizonanetwork.com/test.htm

Thanks so much in advance!!!

Is there anything wrong with this li tag?

<li><a href="uc.html" class="underline">Item 1</a></li>

uc.html is located in the same directory.
The menu is disabled and doesn't work. I can't find out what the problem is.

im having trouble with a drop-down menu.
when i highlight the <li>'s that drop down, i can't do anything that will make them dissapear. here's my java:
Code:

      <script type="text/javascript"><!--//--><![CDATA[//><!--

      sfHover = function() {
	      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	      for (var i=0; i<sfEls.length; i++) {
		      sfEls[i].onmouseover=function() {
			      this.className+=" sfhover";
		      }
		      sfEls[i].onmouseout=function() {
			      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		      }
	      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      //--><!]]></script>

heres my html:
Code:

      			  <li><a href="#">About us</a>
	      			  <ul>
	      				  <li><a href="#">Our company</a></li>
		      			  <li><a href="#">Services we offer</a></li>
		      			  <li><a href="#">Meet our people</a></li>
		      		  </ul>
	      		  </li>

heres my css:
Code:

/* drop down navigation */

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 0.6em;
	background: #333;
	font-weight: normal;
	padding: 0;
	border: solid thin #000;
	margin: 15px 0 30px 0;
	color:#fff;
}

#nav a {
	display: block;
	width: 124px;
	color: #fff;
	text-decoration: none;
	font-size:0.7em;
	padding:7px;
	border-left: solid 4px #000;
}

#nav li {
	float: left;
	padding: 0;
	width: 20%;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 10%;
	width: 13.9em;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
	padding:0;
}

#nav li li {
  margin-left:-1px;
	width: 13em;
}

#nav li ul a {
	width: 205px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav a:hover{
	background: #444;
}

/* end of drop down navigation*/

any ideas???

Hello all,



I just got a job working for a school and noticed their website was pretty much unorganized. So yesterday i took up dreamweaver and created this page(the rest of the site is pending acceptance/working of this main page):



http://pratt.broward.edu/colejw/Attucks/



However, it did come with problems. In IE it displays fine, everything seems to work. But.. Firefox doesn't seem to like my menu bar and flash scroller combo. In firefox the flash scroller appears over the drop down menu, below is a picture of what i mean.







Everything below the menu bar is in a table, so its not the table itself since the drop down appears over the pictures and other text. The only thing overriding it is the flash scroller.



Anyone have any ideas? i played with Z-index and such but no luck and in one instance it moves everything from the menu down over to the right of the menu, i could also be placing the z-index's in the wrong place. If anyone has any fixes please let me know.

I'm not sure if anyone is familiar with spiceworks but it's a fairly nifty application, and I'm trying to customize a create ticket form. Things work fine for the most part, the problem I run into is when I create a dropdown menu for users to select a "program code" that populates to a text area. From reading the errors I can see what is happening but I just don't know how to fix it b/c of the way in which this textbox is named. My code is as follows.
Code:

<form name="form1" action="/portal/new_ticket" class="new-ticket" enctype="multipart/form-data" method="post" onsubmit="Portal.disableSubmit(this);return true">
<input class="text" id="authenticity_token" name="authenticity_token" type="hidden" value="pFUDFH3XRBtjFr+p3+pNaSdbkxj8XJAVcgj9BGcUvPo=" />
<h2>For help with an IT issue you are experiencing, please complete the form below.</h2>
<select name="menu" onchange="document.form1.ticket[description].value=document.form1.menu.options[document.form1.menu.selectedIndex].value;" style="background-color: transparent; font-size: 10px; color: rgb(0, 102, 153); font-family: verdana;">
<option value="#">Choose Program Code.</option>
<option value="01">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
<option value="">07</option>
<option value="">08</option>
<option value="">09</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
</select>
<p class="summary"><label>Summary:</label><input class="text" id="ticket_summary" name="ticket[summary]" type="text" /></p>
<p class="description"><label>Description:</label><textarea id="ticket[description]" name="ticket[description]" type="text" value=""></textarea></p>
<p class="attachment"><label>Optional attachment: </label><input class="text" id="ticket_attachment" name="ticket[attachment]" type="file" /><a href="#" onclick="return Portal.resetHTML($(this).up('p'));; return false;">clear attachment</a></p>
<p class="button"><input name="commit" type="submit" value="Submit Request" /><em class="highlight"></em></p>
</form>

As you can see the name of the textarea is name="ticket[description]" and when I am assigning the value of the user selection to the textarea, onchange="document.form1.ticket[description].value=document.form1.menu.options[document.form1.menu.selectedIndex].value; the syntax b/c of the name is setup for "ticket" to have a variable "description" passed to it and I am then getting the error "description is not defined" which would make sense. I get the code to work if I simply change the name of the textarea to something like "ticket" but then I get an error when I try to submit the ticket in spiceworks, so it appears I need to find a different way of populating the textarea with out changing the name of the textarea. Is there another way to have my dropdown menu populate the textarea, maybe with javascript, where I can keep the name ticket[description] and not have the compiler thinking I'm trying to pass description? Any help is greatly appreciated.

Hi:

I have a 'Select' Box with approx 60 options to select from.

Problem (in IE6 and IE7):

When I click on the button to open up the list of options, the list shoots to the top of my monitor screen instead of opening up *below* the input postition on the screen.

This does not happen on FireFox or Safari --- only IE (6 and 7)

Question: Is there anything I can do to correct this behavior.

Thank you.

-Mel Smith

Hi,

I have one select box and for that 30 options are there, but i need to display only 5 with vertical scroll bars when user clicks on select box. How is it possible? Please help.

I have a select box with restricted width, due to page layout, and the options listed are wider than the select box. This displays fine in Firefox, because as you open the drop-down the options are displayed full-length. However, IE cuts off the option text at the width of the select box.

Consider this example:

HTML Code:

<html>
  <head></head>
  <body>
    <select name="mySelect" style="width:160px;">
      <option>This is a really long select box option</option>
    </select>
  </body>
</html>

Is there a way to get IE to display the entire text?

Thanks!

I have a select list on my site that has around 12 entries in it. The problem is that every 5 entries there is a white space entered into the list that I do not want to be there. The only white space I wanted was the very first option I wanted to be white space for a default not entered option in the select list. Does anyone know how to make this problem go away?

Hi:

Problem with understanding/using the <select /> clause.

I would like the page sent to the user (upon loading) to show the chosen location (i.e., a State of the USA) when I send an updated page with a specified 'Value' set:

Here is an abbreviated portion of my Select Clause:

<select name="homestate">
<option selected="selected" value="CA">Select State</option> /*note the 'CA*/
<option value="AK">Alaska</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option> /* I want California to display */
</select>

Note that my 'Value' above for the "selected" option is "CA" (for California).

However, if I send this updated page to my user with *his* state as 'CA', it still shows as 'Select State' -- where I wish 'California' to display in the Select Default Box.

Question: Is there some way that I can make the Select Clause bring up the word 'California' when it accesses the Value='CA' and so on with other 'value' choices ??

(or does this have to be done (somehow) with Javascript ??

Thanks for any guidance !

-Mel Smith

I have a <select> drop down list. I have a label associated with this element. Here is the code;
<select name="v" id="v" value="0" size="1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="v">No. required</label><br />

The problem is that when the user clicks on the text of the label, the value in the <select> list is changed back to 0. For example, the user selects 3 using the drop down list. Then if the user ever clicks on the label's text, this value returns to 0. How can I stop this from happening and maintain the initially diisplayed value of the <select> list as 0?

Hi,
I am using css to create a dropdown menu. It works fine in all browsers except IE6. In IE6 a dropdown list covers the dropdown menu. please see the atachment/screenshot.
Here is the html/css code I am using.

HTML Code:

{
	position: relative; z-index: 1;}*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;

}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 z-index: 599;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
 z-index: 598;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
 z-index: 598;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 z-index: 598;
}

HTML Code:

<div id="header" class="header" style="background-image: url(./images/blue-curve.jpg); background-position: top;">
            <h1>
                Finance and Risk
            </h1>
            <ul class="dropdown dropdown-horizontal noPrint">
                <li><a href="#" class="dir">Data Management</a>
                    <ul>
                        <?php echo '<li><a href="main.php?PageName=import3' . SID . '">Upload Data</a></li>'; ?>
						<?php echo '<li><a href="main.php?PageName=list' . SID . '">Download Data</a></li>';  ?>
						<?php echo '<li><a href="main.php?PageName=delete' . SID . '">Delete Data</a></li>';  ?>
   		    			<?php echo '<li><a href="main.php?PageName=assetupdate' . SID . '">Update Data</a></li>';  ?>
                    </ul>
                </li>
                <li><a href="#" class="dir">Reports</a>
					<ul>
						<?php echo '<li><a href="main.php?PageName=reports' . SID . '">BS Overview</a></li>';   ?>
						<?php echo '<li><a href="main.php?PageName=CDO' . SID . '">CDOs</a></li>';                ?>
						<?php echo '<li><a href="main.php?PageName=impairment' . SID . '">Impairments</a></li>';   ?>
                        <?php echo '<li><a href="main.php?PageName=fvecapreport' . SID . '">FairValue and Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=creditrisk' . SID . '">Credit Default Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=securitydata' . SID . '">MarketData</a></li>';?>
					</ul>
				</li>
				<li><a href="#" class="dir">Files & Manuals</a>
					<ul>
		        		<?php echo '<li><a href="magnitude.pdf" target="_blank">Product Codes</a></li>';?>
						<?php echo '<li><a href="uploadmanual.pdf" target="_blank">Upload Manual</a></li>';?>
						<?php echo '<li><a href="main.php?PageName=osmdocs' . SID . '">OSM Files</a></li>';   ?>
					</ul>
				</li>
				<li><a href="#" class="dir">Miscellaneous</a>    		<ul>
		        		<?php echo '<li><a href="main.php?PageName=creditcrises' . SID . '">Credit Crises</a></li>';   ?>
					</ul>
				</li>
            		<?php if ($_SESSION['Admin'] == "Yes") { ?>
				<li><a href="#" class="dir">Admin </a>
					<ul>
		        		<?php echo '<li><a href="main.php?PageName=message' . SID . '">Flash Alerts</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel1.php?' . SID . '">Test Marcel1</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel2.php?' . SID . '">Test Marcel2</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel3.php?' . SID . '">Test Marcel3</a></li>';   ?>
		        		<?php echo '<li><a href="main.php?PageName=testajay1' . SID . '">Test Ajay1</a></li>';   ?>
		        		<?php echo '<li><a href="testajay2.php?' . SID . '">Test Ajay2</a></li>';   ?>
		        		<?php echo '<li><a href="testajay3.php?' . SID . '">Test Ajay3</a></li>';   ?>
					</ul>
				</li>
             		<?php } ?>
                <li><a class="dir" href="main.php?PageName=menu">Menu</a>
                    <ul>
                        <?php echo '<li><a href="logout.php">Logout</a></li>';   ?>
                        <?php echo '<li><a href="#">Change password</a> </li>';   ?>
                    </ul>
                </li>
                <li><a class="dir" href="javascript:window.print()" color="green">Print</a> </li>
            </ul>
        </div>

Any one has an idea how to get the css menu on top of the dropdown list?

Thanks in advance

Dear All,
I find that I can do that in firefox, ie 9, but not ie 8 and ie 7. anyone knows the answer.
HTML Code:

           <select id="resourceTypeTree" name="resourceTypeTree">
            <script type="text/javascript">obj158= new Object;obj158.sid = 158;obj158.seq = 1;obj158.lv = 1;obj158.lvText = "首頁";obj158.upLvSid = 1;obj158.isShown = 1;obj158.isNetvigated = 1;obj158.url = "/cle/landingPage.php";obj158.remarks = "";obj158.lastUpdate = "2011-04-18 16:15:50";obj158.uiNextSeq = 0;obj158.nextSid = 160;</script>
            <option value="158" onclick=selectClick('tree',obj158); >→首頁</option>
            <script type="text/javascript">obj3= new Object;obj3.sid = 3;obj3.seq = 2;obj3.lv = 1;obj3.lvText = "語文學習基礎知識";obj3.upLvSid = 1;obj3.isShown = 1;obj3.isNetvigated = 0;obj3.url = "/cle/pages/webSiteReferenceList.php?sid=3&upLvSid=1";obj3.remarks = "";obj3.lastUpdate = "2011-04-18 16:28:05";obj3.uiNextSeq = 7;obj3.nextSid = 160;</script>
            <option value="3" onclick=selectClick('tree',obj3); >→語文學習基礎知識</option>
            <script type="text/javascript">obj10= new Object;obj10.sid = 10;obj10.seq = 1;obj10.lv = 2;obj10.lvText = "漢字形音義";obj10.upLvSid = 3;obj10.isShown = 1;obj10.isNetvigated = 0;obj10.url = "/cle/pages/webSiteReferenceList.php?sid=10&upLvSid=3";obj10.remarks = "";obj10.lastUpdate = "2011-03-16 13:46:44";obj10.uiNextSeq = 10;obj10.nextSid = 160;</script>
            <option value="10" onclick=selectClick('tree',obj10); >→→漢字形音義</option>
            <script type="text/javascript">obj38= new Object;obj38.sid = 38;obj38.seq = 1;obj38.lv = 3;obj38.lvText = "漢字的演變";obj38.upLvSid = 10;obj38.isShown = 1;obj38.isNetvigated = 1;obj38.url = "/cle/pages/webSiteReferenceList.php?sid=38&upLvSid=10";obj38.remarks = "";obj38.lastUpdate = "2011-03-16 14:25:54";obj38.uiNextSeq = 0;obj38.nextSid = 160;</script>
            <option value="38" onclick=selectClick('tree',obj38); >→→→漢字的演變</option>
            <script type="text/javascript">obj39= new Object;obj39.sid = 39;obj39.seq = 2;obj39.lv = 3;obj39.lvText = "字形的正體、俗體、異體";obj39.upLvSid = 10;obj39.isShown = 1;obj39.isNetvigated = 1;obj39.url = "/cle/pages/webSiteReferenceList.php?sid=39&upLvSid=10";obj39.remarks = "";obj39.lastUpdate = "2011-03-16 14:25:54";obj39.uiNextSeq = 0;obj39.nextSid = 160;</script>
            <option value="39" onclick=selectClick('tree',obj39); >→→→字形的正體、俗體、異體</option>
          </select>

Regards,
Man Pak Hong, Dave

manpakhong@hotmail.com

hey

I'm new at the forum here and kinda need some help with a multi level drop down menu for my website.
there shall be 2 boxes where in the first one you can choose your Zipcode and then a box below to choose the city you are living in.
first time working with html and I'm not sure if it can be made be that, and i was thinking i could get some help with that for some one in here.

let me know if it's not understandable^^

^^thanks for the help^^

hey guys,

i'm not sure if this should go in serverside or HTML or javascript,

but is there a way to do an editable dropdown without using ASP?


can't seem to find it anywhere except all hits links to asp.