HTML - Highlighting An Option In A <select> Menu
Hey all!
I'm trying to set a predefined value in a <select> menu, that is to say, I want something to be highlighted before the user does anything. I've tried the following: <select name="test" size="2" value="x"> <option>x</option><option>y</option> </select> This does not work. Any advice would be great! Thanks for your time. Similar TutorialsHello all, I have a stong question because i can't solve it. I want to creat a drop down list with images beside each row. Usualy on clasic html is something like this: select ... option value /option /select But i want a small image (icon) beside each option from select. See for example: http://www.scrigroup.com/afaceri/con...ate/index7.php on the top page see a clasic select. How can i change it to icon seclect on each option? Thanks for your effort to reply 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 hi guys, I have a form with HTML Code: <select name="myOnClick" onChange="DoSubmission()"> <option value="1">Year 1 </option> <option value="2">Year 2</option> <option value="5">Year 5</option> <option value="10">Year 10</option> <option value="25">Year 25</option> </select> when the user clicks on one of these, it refreshes the page and updates a variable somewhere bsaed on the value. However when it refreshes the value showing is always Year 1. I want it to show the option they have just clicked. Anyone know the code that allows you to choose which one shows up? I can then use php to script which one is selected. TIA I have an option list and an iframe. My goal is to change the target source for the iFrame when I select and option from the list. I'm able to do this with normal links like this Code: <a href="video/video-page.html" target="VideoFrame">Video Page</a> But how can I do this with a option list? If i didn't plan on having 50+ different options I would just use normal links however this is not the case. Is it possible to do this? Hi, I want to modify a form where I have some "select option" and input text tags. The thing is that when a user select an option from the "select opcion" tag, according to the option selected I want to print some input text in the form .. how can i do that?. Thks a lot! 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 I have some fields and a Select option, I want to add a new field if I select "Add" option, and remove field when I select "Remove" option, can I do it in very simple JavaScript? How do I get the selected item from a select option list? I dont need the value I need the text associated with the value. I can get the value with (in vbscript): strValue = .mylist.value Have searched google exhaustively to see how to do this simple thing but have found nothing. Thanks. Hi, is it possible that, to make select option to allow user enter the text...? user can choose from select option.. if did not in the list, then user might need to enter text. Anyone can help me? Hi, does anybody have a link that could point me in the right direction of learning about a drop down menu that is used as a search option? Such as in this site here- click me! So basically the viewer can enter one of two fields to bring back the relevant info, in this case either a designer or price range option. I've not done one of these before, but think it would be useful on my site! advice appreciated, thanks!! Hi All, I was able to Highlight in yellow a sentence. But it doesn't work on the Option / Drop Down Menu sentence. Please HEEEELLLLP me find my mistake(s) BELOW: Code: <!DOCTYPE html> <head> <title> Yellow Hightlight </title> </head> <body bgcolor="#00CCFF"> <script type="text/javascript"> window.onload=function() { document.getElementById('NewsletterList').onchange=function() { window.location=('http://www.example.com/'+this.value+''); } } </script> <select id="NewsletterList"> <option value=""><P> <FONT style="BACKGROUND-COLOR: yellow"> PLEASE SELECT THE FOLLOWING: </FONT> CLICK This Box and Select!</P> </option> <!--this option takes you to your home page--> <option value="xxxxx">yyyy</option><!--this option takes you to . . . . . </body> </html> Hi All, I was told to correct some basic mistakes and if I still needed help, to ask for help. Well, 1 month later I was able to correct some errors and now 5 from the 8 Options Choices are working. NEED HELP WITH THE DEFAULT/WHEN TYPING THE URL AND 2 MORE OPTIONS WHICH DOESN'T WORK. I am a beginner, so I believe that the intermediates and experts can help me. The site works fine from here, since it filter errors. Actually it works with all browsers except Internet explorer 7-9. http://www.homeless-forum.org Please find the Option menu below to finally help me find the rest few errors : HEEEEEEEEEEEELLLLLLLLLLLLLLPPPPPPPPPPPPPPPPPPPPPPPP!!!!!!!!!!!!!! Thanks in advanced and GOD BLESS YOU ALL. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title> HFHF Homeless Formerly Homeless Forum www.homeless-forum.com</title> <script type="text/javascript"> window.onload=function() { document.getElementById('NewsletterList').onchange=function() { window.location=('http://www.homeless-forum.org/'+this.value+''); } } </script> <body bgcolor="#00CCFF"> <select id="NewsletterList"> <br /> <option value=""><b><em> PLEASE CLICK This Box and Select! 'Internet Explorer 8 or 9 BETA is NOT Recommended, Until They FIX All Their BUGS'. </b></em></option><!--this option takes you to your home page--> <option value="news7">Newsletter 2010</option><!--this option takes you to your newsletter 2010--> <option value="news3">Ileana Ros-Lehtinen, Homeless Pioneer Pics. </option><!--this option takes you to your newsletter 3--> <option value="news4">High Quality Pictures, Videos, Slide Shows and MUCH MORE. HFHF Inc. and leana Ros-Lehtinen, Homeless Pioneer Slide Show, Homeless Beaten-Up and Killed, etc.<br / ></option> <option value="news5">Newsletter 2009.</option><!--this option takes you to your newsletter 2009--> <option value="news2">Newsletter 2008.</option><!--this option takes you to your newsletter 2008--> <option value="blog/wp-login.php">BLOG: Please Login and post your comments, ideas, tips, etc. Be patient for Large Files to LOAD</option><!--this option takes you to your blog--> <option value="news4">More! HFHF Newsletters 2010, VIDEOS, "IE9-Microsoft-Reply, ETC.</option> </select> geovisit(); </script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1306942201" alt="setstats" border="0" width="1" height="1"></noscript> <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40"> <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <meta name=ProgId content=Word.Document> <meta name=Generator content="Microsoft Word 14"> <meta name=Originator content="Microsoft Word 14"> <link rel=File-List href="hfhf-newsltr-2010_files/filelist.xml"> <link rel=Edit-Time-Data href="hfhf-newsltr-2010_files/editdata.mso"> <!--[if !mso]> I am wanting to link to a certain option in a select list via an anchor link on another page. Each option displays different info below it using javascript. Example: I have a date on a php based calendar linking to a events page. On the events page is the select list with different events that will show below the list when selected. How can I link that specific date to that event so that it is displayed? Is this possible? How to make a image rollover based menu that changes image on mouse rollover and on mouse click so when I click the image it stays changed until I click on another image in the menu. I want to sell some stuff over the internet like cloths.... And I use Pagseguro (Its a brazilain thing, like paypal). So, I have this wordpress site, with pagseguro plugin installed on it. To add products on my posts I use the following code to get the Add to cart button. HTML Code: <object><form method="post" action="" style="display:inline"> <input type="submit" value="Adicionar ao Carrinho" /> <input type="hidden" name="product" value="[b]PRODUCTNAME[/b]" /><input type="hidden" name="price" value="PRODUCTPRICE" /><input type="hidden" name="addcart" value="1" /><input type="hidden" name="cartLink" value="<?php the_permalink() ?>" /> </form></object> The thing is, the plugin is really simple. All it does is: show "add to cart" button and the "pay" button. And like I said, I want to sell cloths. To sell cloths there got to be the Sizes: "S""M""L" and color. And what I wanted to do is: Create a form like this: HTML Code: <form name="jump"> <p align="center"> <select name="menu"> <option value="URL">Text that will appear in the choices</option> <option value="URL">Text that will appear in the choices</option> <option value="URL">Text that will appear in the choices</option> </select> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"> </p> </form> (I found that on http://personal-computer-tutor.com/dropdownlist.htm) On the options there would be the sizes for my clients to choose. And on the "ADD TO CART CODE" (the first code on the top) on the "PRODUCTNAME" part would be a PHP or something that would gather the clients choice and add it there. So when he press the button the product he chose would show on the cart with the size in parentesis. Like this: HTML Code: <object><form method="post" action="" style="display:inline"> <input type="submit" value="Adicionar ao Carrinho" /> <input type="hidden" name="product" value="Alpinestars (<?php GET FORM VALUE ?>)" /><input type="hidden" name="price" value="PRODUCTPRICE" /><input type="hidden" name="addcart" value="1" /><input type="hidden" name="cartLink" value="<?php the_permalink() ?>" /> </form></object> (for the button) and if he chooses small it be like this on the shopping cart: Alpinestars (Small) I know its really difficult to understand My english is really bad. But im really sad because I cant do this by any way. Could yall please help me with my problem? Thank You. Hi, I am creating a form in which i have a dropdown menu. According to the selection(s) in drop down menu, that many text field(s) should be shown below that drop down menu. Have a look at this code... <html> <head> <title> Sample Application </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function callMe() { if(document.MyForm.dropDownValue.value != ""){ document.getElementById("txtBox").style.visibility = "visible"; } else{ document.getElementById("txtBox").style.visibility = "hidden"; } } </script> </head> <body> <form name="MyForm"> <table> <tr> <td> <select name="dropDownValue" onchange="callMe();"> <option value="">--None--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </tr> <tr id="txtBox" style="visibilty:visible"> <td> Enter Your Value He </td> <td> <input type="text" name="txtEntry" value=""> </td> </tr> </table> </body> </html> : the problem is: when I select 2, it suppose to show 2 text fileds and 3 when i select 3 accordingly. I am new to this stuff...so,can any one help me out ASAP pls?? thanks , i will be waiting for your reply... -S Hi, i am sure you's are all familiar with photobucket, well i was wonderig if anyone knows the code to automatically highlight and copy to the clipboard information in a box when it is just simply clicked like it does with the ht code, image url, etc next to your picture on photobucket. thanks, karl Well hello folks. Nice place you have here. This looks like just the place to ask a question I have, I hope you'll indulge me. I'm working through my blog site and trying to get it up to xhtml snuff...but that's another issue. What I'd like to start with is a little quirky problem that only seems to effect IE6. When users try to highlight text, odd things happen. Here's one person's attempt to explain it: Quote: This is the pattern: Highlight works on the page displayed on the screen (either main page or each entry). The spot I pointed to before is where the screen display ends on my initial main page load. Once I click on each entry, highlight works on the text displayed on that initial screen - it stops working (starts highlight blocks) once I scroll down beyond that initial screen display. It seems to repeat this pattern with quotes, comments, or just entry text - just beyond that initial screen. Hope it helps. I believe this highlighting issue has to do with my use of css positioning. Let me show you just the key parts of the html page, and then the corresponding bits of the stylesheet. Let's say we have a page consisting of the following div's: Code: <div id="overall"> <div id="titlecell"> <div id="navbar"> <div id="maincell"> <div id="titlebarright"> <div id="leftmargin2"> <div id="rightmargin2"> Here are the related bits of CSS: Code: div#overall { position:relative; width: 1000px; margin: auto; } div#titlecell { text-align: right; vertical-align: top; height: 150px; font-size:x-small; position: absolute; top: 0px; left: 0px; width: 1000px; } div#navbar { font-size:x-small; position: absolute; top: 15px; left: 650px; } div#maincell { color: #252525; text-align: left; vertical-align: top; padding-top: 30px; width: 580px; position: absolute; top: 160px; left: 0px; } div#titlebarright { width: 382px; height: 185px; background: url(http://www.solomonia.com/images/titlebarrightbox.gif) no-repeat; position:absolute; top:95px; left:600px; } div#leftmargin2 { height: 10000px; color: #252525; vertical-align: top; text-align: center; width: 160px; padding: 0; position: absolute; top: 285px; left: 600px; } div#rightmargin2 { height: 10000px; color: #252525; width: 220px; text-align: center; vertical-align: top; padding: 0; position: absolute; top: 285px; left: 763px; } So note, we have a div called "overall" whose position is set to "relative" which functions as a container for all the other divs with position set to "absolute." I'm figuring there's something about this that gives IE fits when highlighting. What do you think? Edit: My apologies. This probably should have been put in the css forum. I have xhtml on the brain I guess. Please feel free to move. Hi: - All of the left-menu icons correctly highlight when I scroll over them except for the one (which I have most recently added to the site) - All of the left-menu icons correctly remain highlighted when I travel to any given corresponding destination page on the site Here's the function call of the menu button in question...this is logically identical to the other function calls invoking mouse-over "highlighting": <div><a href="destination.html" onmouseover="java script:rollOver('ln_07','ln_07_ov');" onmouseout="java script:rollOver('ln_07','ln_07');"><img src="img/ln_07.jpg" name="ln_07" alt="Destination" width="126" height="26" border="0"></a></div> Just to restate: the scroll-over highlights are correctly invoked in all instances with the exception of the one menu icon applicable to all pages of the site except its destination page (where it correctly remains in highlight mode...) Many thanks-- BR |