JavaScript - Dynamic Dropdown Menu
I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted..
i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) Similar TutorialsHi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? Hi there, im new to the forum and currently in the process of building a website. Unfortunetly it needs a little javascript putting in and I dont know any javascript atall. So heres my problem: -------------------- I want 3 drop down menus where you change the top option, the middle menu updates (from a sql database), you change the middle option then the bottom option updates (again from the database). you select the 3rd option. it searches a database for the item matching all 3 entrys it displays the price all without reloading the page then you add the item to cart. ------------ Heres my site with fake data in the dropdowns: http://xeon.donov.co.uk/~blinky/?a=cat_sub&cid=3&f=A3 Hi, im looking for some help figuring out how to achieve the following: i have an ecommerce site. on a product a customer can select attributes associated with that product (i.e colour, size, shape etc.). Each attriute is represented by a HTML select, containing the values allowed for that product. the problem comes when certain colours do not come in certain sizes. Say my product has the following: colours: red, yellow, blue size: small, medium, large shape: square, circle but there is no stock for red,medium and red,large. I need to dynamically remove medium + large when red is selected so they cannot be chosen from the select. This could apply for any combination of attributes. Also this is completely dynamic so there could be 2 attributes or 10 attributes, and changing one would need to cascade down the selects. i have posted the code at the bottom of the post. The js representation of what is selectable is an object, containing other objects, each object representing a variation and wether to show or not. i know this is a right mouthful to try and explain, its even hard to figure out how to do it! an example of what im trying to achieve is: http://www.bit-cart.com/online-store-front-live-demo/products/Mikes-Test-Product.html. I do have jquery available on my page if it helps. any ideas would be most appreciated! thanks mike HTML: Code: <select name='attribute_12' id='attribute_12' class='attribute-select'> <option value='166'>attribute_12 166</option> <option value='165'>attribute_12 165</option> <option value='171'>attribute_12 171</option> </select> <select name='attribute_10' id='attribute_10' class='attribute-select'> <option value='108'>attribute_10 108</option> <option value='110'>attribute_10 110</option> <option value='120'>attribute_10 120</option> <option value='148'>attribute_10 148</option> </select> <select name='attribute_19' id='attribute_19' class='attribute-select'> <option value='201'>attribute_19 201</option> <option value='202'>attribute_19 202</option> <option value='203'>attribute_19 203</option> </select> JS: Code: <script type="application/javascript"> var variants = { "304" : {"attrs":[171,108,201], "show":0}, "305" : {"attrs":[171,108,202], "show":1}, "306" : {"attrs":[171,108,203], "show":0}, "307" : {"attrs":[171,120,201], "show":1}, "308" : {"attrs":[171,120,202], "show":0}, "309" : {"attrs":[171,120,203], "show":1}, "310" : {"attrs":[171,148,201], "show":0}, "311" : {"attrs":[171,148,202], "show":1}, "312" : {"attrs":[171,148,203], "show":0}, "313" : {"attrs":[171,110,201], "show":1}, "314" : {"attrs":[171,110,202], "show":0}, "315" : {"attrs":[171,110,203], "show":1}, "316" : {"attrs":[166,108,201], "show":0}, "317" : {"attrs":[166,108,202], "show":1}, "318" : {"attrs":[166,108,203], "show":0}, "319" : {"attrs":[166,120,201], "show":1}, "320" : {"attrs":[166,120,202], "show":0}, "321" : {"attrs":[166,120,203], "show":1}, "322" : {"attrs":[166,148,201], "show":0}, "323" : {"attrs":[166,148,202], "show":1}, "324" : {"attrs":[166,148,203], "show":0}, "325" : {"attrs":[166,110,201], "show":1}, "326" : {"attrs":[166,110,202], "show":0}, "327" : {"attrs":[166,110,203], "show":1}, "328" : {"attrs":[165,108,201], "show":0}, "329" : {"attrs":[165,108,202], "show":1}, "330" : {"attrs":[165,108,203], "show":0}, "331" : {"attrs":[165,120,201], "show":1}, "332" : {"attrs":[165,120,202], "show":0}, "333" : {"attrs":[165,120,203], "show":1}, "334" : {"attrs":[165,148,201], "show":0}, "335" : {"attrs":[165,148,202], "show":1}, "336" : {"attrs":[165,148,203], "show":0}, "337" : {"attrs":[165,110,201], "show":1}, "338" : {"attrs":[165,110,202], "show":0}, "339" : {"attrs":[165,110,203], "show":1} } </script> Howdy, So I have some javascript/html on one file (another.html) that I would like to split into two separate pages: home2.html cars.js If you view the code for home2.html everything works up until the model form box. That's where my problem lies. I can get the code to work on another.html but I'm splitting it up incorrectly in home2.html Help would be much appreciated. PS: If you are going to gripe at me for not using PHP or SQL to make things easier (for future updates to code) at least link me to something to learn from then insult me. another.html Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function dropdownlist(list) { document.formname.subcategory.options.length=0; switch (list) { case "bmw": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("3 Series"); document.formname.subcategory.options[2]=new Option("5 Series"); document.formname.subcategory.options[3]=new Option("Z Series"); break; case "buick": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Century"); document.formname.subcategory.options[2]=new Option("Lesabre"); document.formname.subcategory.options[3]=new Option("Park Avenue"); document.formname.subcategory.options[4]=new Option("Regal"); document.formname.subcategory.options[5]=new Option("Riveria"); break; case "cadillac": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Catera"); document.formname.subcategory.options[2]=new Option("Deville"); document.formname.subcategory.options[3]=new Option("El Dorado"); document.formname.subcategory.options[4]=new Option("Seville"); break case "chevrolet": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Astro"); document.formname.subcategory.options[2]=new Option("Blazer S 10"); document.formname.subcategory.options[3]=new Option("Camaro"); document.formname.subcategory.options[4]=new Option("Corvette"); document.formname.subcategory.options[5]=new Option("G2500"); document.formname.subcategory.options[6]=new Option("Lumina"); document.formname.subcategory.options[7]=new Option("Malibu"); document.formname.subcategory.options[8]=new Option("Monte Carlo"); document.formname.subcategory.options[9]=new Option("Suburban"); document.formname.subcategory.options[10]=new Option("Tahoe"); document.formname.subcategory.options[11]=new Option("Ventur"); break case "chrysler": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Town & Country"); document.formname.subcategory.options[2]=new Option("Cirrus"); document.formname.subcategory.options[3]=new Option("Concord"); document.formname.subcategory.options[4]=new Option("Sebring"); break; case "dodge-plymouth": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Avenger"); document.formname.subcategory.options[2]=new Option("Breeze"); document.formname.subcategory.options[3]=new Option("Caravan Voyager"); document.formname.subcategory.options[4]=new Option("Durango"); document.formname.subcategory.options[5]=new Option("Intrepeid"); document.formname.subcategory.options[6]=new Option("Ram Van 1500"); document.formname.subcategory.options[7]=new Option("Ram Van 2500"); case "ford": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Contour"); document.formname.subcategory.options[2]=new Option("Crown Victoria"); document.formname.subcategory.options[3]=new Option("E150"); document.formname.subcategory.options[4]=new Option("E250"); document.formname.subcategory.options[5]=new Option("E350"); document.formname.subcategory.options[6]=new Option("Escort"); document.formname.subcategory.options[7]=new Option("Expedition"); document.formname.subcategory.options[8]=new Option("Explorer"); document.formname.subcategory.options[9]=new Option("Freestar"); document.formname.subcategory.options[10]=new Option("Mustang"); document.formname.subcategory.options[11]=new Option("Taurus"); document.formname.subcategory.options[12]=new Option("Windstar"); break; case "gmc": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Jimmy S 15"); break; case "honda": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Accord"); document.formname.subcategory.options[2]=new Option("Civic"); document.formname.subcategory.options[3]=new Option("Passport"); break; case "isuzu": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Odyssey"); document.formname.subcategory.options[2]=new Option("Rodeo"); break; case "jeep": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Cherokee"); document.formname.subcategory.options[2]=new Option("Grand Cherokee"); document.formname.subcategory.options[3]=new Option("Wrangler"); break; case "lincoln": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Continental"); document.formname.subcategory.options[2]=new Option("Navigator"); document.formname.subcategory.options[3]=new Option("Stratus"); document.formname.subcategory.options[4]=new Option("Town Car"); break; case "mercedez": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("M Class ML"); case "mercury": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Cougar"); document.formname.subcategory.options[2]=new Option("Grand Marquis"); document.formname.subcategory.options[3]=new Option("Mountaineer"); document.formname.subcategory.options[4]=new Option("Mystique"); document.formname.subcategory.options[5]=new Option("Sable"); document.formname.subcategory.options[6]=new Option("Villager"); break; case "mitsubishi": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Eclipse"); document.formname.subcategory.options[2]=new Option("Galant"); break; case "nissan": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("200 SX"); document.formname.subcategory.options[2]=new Option("Altima"); document.formname.subcategory.options[3]=new Option("Maxima"); document.formname.subcategory.options[4]=new Option("Quest"); document.formname.subcategory.options[5]=new Option("Sentra"); case "oldsmobile": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Alero"); document.formname.subcategory.options[2]=new Option("Blazer"); document.formname.subcategory.options[3]=new Option("Cutlass"); document.formname.subcategory.options[4]=new Option("Eighty Eight"); document.formname.subcategory.options[5]=new Option("Silhouette"); break; case "pontiac": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Boneville"); document.formname.subcategory.options[2]=new Option("Firebird"); document.formname.subcategory.options[3]=new Option("Grand AM"); document.formname.subcategory.options[4]=new Option("Grand Prix"); document.formname.subcategory.options[5]=new Option("Sun Fire"); document.formname.subcategory.options[6]=new Option("Transport"); break; case "saturn": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Saturn"); break; case "toyota": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("4 Runner"); document.formname.subcategory.options[2]=new Option("Avalon"); document.formname.subcategory.options[3]=new Option("Camry"); document.formname.subcategory.options[4]=new Option("Corolla"); document.formname.subcategory.options[5]=new Option("Solara"); break; case "volkswagen": document.formname.subcategory.options[0]=new Option("Select Model",""); document.formname.subcategory.options[1]=new Option("Jetta"); document.formname.subcategory.options[2]=new Option("New Bettle"); document.formname.subcategory.options[3]=new Option("New Golf"); document.formname.subcategory.options[4]=new Option("New Jetta"); document.formname.subcategory.options[5]=new Option("Passat"); break; } return true; } </script> </head> <title>Dynamic Drop Down List</title> <body> <form id="formname" name="formname" method="post" action="submitform.asp" > <table> <tr> <td>Make:</td> <td><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"> <option value="">Select Make</option> <option value="bmw">BMW</option> <option value="buick">Buick</option> <option value="cadillac">Cadillac</option> <option value="chevrolet">Chevrolet</option> <option value="chryler">Chrysler</option> <option value="dodge-plymouth">Dodge-Plymouth</option> <option value="ford">Ford</option> <option value="gmc">GMC</option> <option value="honda">Honda</option> <option value="isuzu">Isuzu</option> <option value="lincoln">Lincoln</option> <option value="mercedez">Mercedez</option> <option value="mercury">Mercury</option> <option value="mitsubishi">Mitsubishi</option> <option value="nissan">Nissan</option> <option value="oldsmobile">Oldsmobile</option> <option value="pontiac">Pontiac</option> <option value="saturn">Saturn</option> <option value="toyota">Toyota</option> <option value="volkswagen">Volkswagen</option> </select></td> </tr> <tr> <td align="right" valign="middle">Model: </td> <td align="left" valign="middle"><script type="text/javascript" language="JavaScript"> document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>') </script> <noscript><select name="subcategory" id="subcategory" > <option value="">Select Model</option> </select> </noscript></td> </tr> </table> </form> </body> </html> home2.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <link href="index.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="cars.js"></script> </head> <body> <div id="wrapperLeft"> <div id="wrapperRight"> <div id="main"> <div id="columnLeft"> <div id="center"><h3></h3></div> </div> <div id="columnRight"> <div id="center"><h3></h3> </div> </div> <div id="columnCenter"> <div id="center"> <form id="carinfo" name="carinfo" method="post"> <!--action="?"--> <fieldset><legend>Legalization of Autmoibles</legend> <table> <tbody> <tr> <td>First Name:</td><td><input type="text" name="firstname" maxlength="30"></td> </tr> <tr> <td>Last Name:</td><td><input type="text" name="lastname" maxlength="30"></td> </tr> <tr> <td>Number:</td><td><input type="text" name="number" maxlength="20"></td> </tr> <tr> <td>Email:</td><td><input type="text" name="email" maxlength="35"></td> </tr> <tr> <td>City:</td><td><input type="text" name="city" maxlength="30"></td> </tr> <tr> <td>State:</td><td><select name="state" size="1"> <option selected value=""></option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select></td> </tr> <tr><td>Do you have the following:</td></tr> <tr><td><input type="checkbox" name="mandatory" value="license" /></td><td>Driver's License</td></tr> <tr><td><input type="checkbox" name="mandatory" value="title" /></td><td>Vehicle Title</td></tr> <tr><td><input type="checkbox" name="mandatory" value="receipt" /></td><td>Utility Receipt from Mexico showing recieving address</td></tr> <tr><td><input type="submit" value="Submit" /></td></tr> <tr><td>Make</td> <td> <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"> <option value="">Select Make</option> <option value="bmw">BMW</option> <option value="buick">Buick</option> <option value="cadillac">Cadillac</option> <option value="chevrolet">Chevrolet</option> <option value="chryler">Chrysler</option> <option value="dodge-plymouth">Dodge-Plymouth</option> <option value="ford">Ford</option> <option value="gmc">GMC</option> <option value="honda">Honda</option> <option value="isuzu">Isuzu</option> <option value="lincoln">Lincoln</option> <option value="mercedez">Mercedez</option> <option value="mercury">Mercury</option> <option value="mitsubishi">Mitsubishi</option> <option value="nissan">Nissan</option> <option value="oldsmobile">Oldsmobile</option> <option value="pontiac">Pontiac</option> <option value="saturn">Saturn</option> <option value="toyota">Toyota</option> <option value="volkswagen">Volkswagen</option> </select> </td> </tr> <tr> <td>Model:</td> <td> <script type="text/javascript" language="JavaScript"> document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>') </script></td> </fieldset> </form> </tbody> </table> </div> </div> </div> </div> </div> <div class="footer"> </div> </body> </html> --cars.js contained in next post-- Ok so i am trying to make 3 dropdowns based off a mysql table. and the 3 dropdowns need to be based off of the previous dropdown. i.e Source, School, Sub. Select Source, and the schools in dropdown 2 are based off of the source they selected, and when they select a school, all the sub cats for that school are in the sub category dropdown. It seems like a simple concept, but i've google'd EVERYWHERE and notihng. I have the 3 dropdown's pulling from my database perfectly. i just cannot base the next dropdown on the previous selection! I know nothing of javascript..im a front end designer with little php/mysql. I've read that Ajax is the way to go, so here i am ! any tutotials, links or sample script layouts i can use would be amazing! Thank you! jt Hey, Were I am stuck is with the jquery I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited. I currently have: getfeed.php - the page that is connected to the javascript Code: <?php include('class/class.form.php'); include('class/class.users.php'); $iID = trim($_GET['extension']); if(!$iID) die('No User Data found.'); $getValues = new Extension(); $user_info = $getValues->getUsersInformation($iID); $sip_info = $getValues->getSipInformation($iID); //print_r($user_info); //print_r($sip_info); $array = $getValues->getUsersInformation($iID); echo '<br /><br />-- end of query --'; The Javascript Code: if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box var sel = document.id('LoadExtension'); // ser select box as var. sel.addEvent('change', function(chg) { // add change event to select box. if(sel.getSelected().get('value') != '') { // on change if selected value is not empty. new Request.HTML({ url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'), onRequest: function() { document.id('ExtensionResponse').set('html', 'loading...'); }, onComplete: function(r1, r2, html, js) { document.id('ExtensionResponse').set('html', html); } }).send(); } }); } At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form. hello, i am writing a script that will update a dropdown list based on the selection of a previous list. the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script. the hierachy is: category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead) everything works correctly, except for one major issue: you can not change the selection of the third (brand) box this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help. here is an example script, sorry it is so long Code: <script language="javascript"> function fillprodCat(){ // this function is used to fill the category list on load addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories"); } function SelectprodSubCat(){ // on selection of category, this is called removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs"); } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects"); } } function SelectprodBrand(){ // ON selection of category, sub category, or brand this is called removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None"); } if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){ document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries"); } } } function removeAllOptions(selectbox) { var i; for(i=selectbox.options.length-1;i>=0;i--) { //selectbox.options.remove(i); selectbox.remove(i); } } function addOption(selectbox, value, text ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } </script> please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up hi Peers, i am having issue capturing the value of the selected DDL using IE. the code below works just fine in Firefox... // Create a new drop down list -- for text box use 'input' instead of 'select' var newDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox newDDL.setAttribute("style","width:300px"); //firefox newDDL.setAttribute("width","300px"); newDDL.style.width = "300px"; newDDL.id = 'id' + elementid + ColumnElement; newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement); // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=rec_count;i++) { objOption = document.createElement('option') objOption.text = ITEM[i] newDDL.options.add(objOption) } counter++; newDDL.onchange = show1; both cases are giving the value selected in firefox function 1: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value=' + this.value ); } function 2: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value='+ this.getAttribute('value')); } any suggestion will be appreciated thanks Javascript novice here looking to create a dynamic dropdown based on date. It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated. Thanks. Here's what I need: In September, the dropdown will display these prices Code: <option value="100">Product 1</option> <option value="150">Product 2</option> <option value="200">Product 3</option> In October, the dropdown will display these prices <option value="50">Product 1</option> <option value="100">Product 2</option> <option value="150">Product 3</option> So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript"> function getXMLHTTP() { //fuction to return the xml http object var xmlhttp=false; try{ xmlhttp=new XMLHttpRequest(); } catch(e) { try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e1){ xmlhttp=false; } } } return xmlhttp; } function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) { var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('schooldiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } function getSub(id,cid) { var strURL="findSub.php?source="+id+"&cid="+cid; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('subdiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } </script> The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that. Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly. Any help is greatly appreciated. thank you Can someone please explain this code to me please. Its the beginning of a javascript code to hide and show a drop down menu. Ill include the html code to give u a better understanding too. Thank you so much, ive been frustrated on this for nearly a month HTML Code: <body> <h1>Menu Test</h1> <ul id=”menu”> <li class=”menu”><a href=”#”>Home</a></li> <li class=”menu”><a href=”#”>Products</a> <ul> <li><a href=”#”>Sub-item 1</a></li> <li><a href=”#”>Sub-item 2</a></li> <li><a href=”#”>Item 3</a></li> </ul></li> <li class=”menu”><a href=”#”>Support</a> <ul> <li><a href=”#”>Sub-item 1</a></li> <li><a href=”#”>Sub-item 2</a></li> </ul></li> <li class=”menu”><a href=”#”>Employment</a> <ul> <li><a href=”#”>Sub-item 1</a></li> <li><a href=”#”>Sub-item 2</a></li> </ul></li> <li class=”menu”><a href=”#”>Contact Us</a> <ul> <li><a href=”#”>Sub-item 1</a></li> <li><a href=”#”>Sub-item 2</a></li> </ul></li> </ul> </body> JavaScript Code: // global variables for timeout and for current menu var t=false,current; function SetupMenu() { if (!document.getElementsByTagName) return; items=document.getElementsByTagName(“li”); for (i=0; i<items.length; i++) { if (items[i].className != “menu”) continue; //set up event handlers thelink=findChild(items[i],”A”); thelink.onmouseover=ShowMenu; thelink.onmouseout=StartTimer; //is there a submenu? if (ul=findChild(items[i],”UL”)) { ul.style.display=”none”; for (j=0; j<ul.childNodes.length; j++) { ul.childNodes[j].onmouseover=ResetTimer; ul.childNodes[j].onmouseout=StartTimer; } } } } // find the first child object of a particular type function findChild(obj,tag) { cn = obj.childNodes; for (k=0; k<cn.length; k++) { if (cn[k].nodeName==tag) return cn[k]; } return false; } hey guys, i wonder why my drpdown box cant be copied? can some1 help me correct it.. thanks! Code: <html> <head> <title></title> </head> <script type="text/javascript"> var desc = new Array(); desc['a1'] = 'issue'; desc['a2'] = 'tel'; desc['a3'] = 'account name'; desc['a4'] = 'caller'; desc['a5'] = 'OS'; desc['a6'] = 'modem'; desc['a7'] = 'router'; function CopyFields(){ var copytext = ''; for(var i = 0; i < arguments.length; i++){ copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).value + '\n'; } var tempstore = document.getElementById(arguments[0]).value; document.getElementById(arguments[0]).value = copytext; document.getElementById(arguments[0]).focus(); document.getElementById(arguments[0]).select(); document.execCommand('Copy'); document.getElementById(arguments[0]).value = tempstore; } --></script> <body> <form> <table border="0" cellpadding="0" cellspacing="0" style="width: 500px;"> <tbody> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="width: 500px;"> <tbody> <tr> <td style="text-align: right;"> issue:</td> <td> <textarea id="a1"></textarea></td> </tr> <tr> <td style="text-align: right;"> tel:</td> <td> <input id="a2" /></td> </tr> <tr> <td style="text-align: right;"> account name:</td> <td> <input id="a3" /></td> </tr> <tr> <td style="text-align: right;"> caller:</td> <td> <input id="a4" /></td> </tr> <tr> <td style="text-align: right;"> os:</td> <td> <select id="a5"><option selected="selected" value="">Windows 7</option><option value="">Windows Vista</option><option value="">Windows XP</option><option value="">X MAC 10.x</option><option value="">Other</option></select></td> </tr> <tr> <td style="text-align: right;"> modem:</td> <td> <input id="a6" /></td> </tr> <tr> <td style="text-align: right;"> router:</td> <td> <input id="a7" /></td> </tr> </tbody> </table> <input onclick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7');" type="button" value="Copy" /> <input type="reset" /></td> </tr> </tbody> </table> </form> </body> </html> i want to activate a dropdown menu with a lot of submenus and i have function setActive() { aObj = document.getElementById('nav').getElementsByTagName('a'); for(i=0;i<aObj.length;i++) { if(document.location.href.indexOf(aObj[i].href)>=0) { aObj[i].className='active'; } } } window.onload = setActive; but it activate me only the sub butons and i want the primary - the top buton active i have a css class separated can you help me ? what should i add in the code? Hello friends. I need a little help with this code i can't get to work. Under 500.000 euros a link to another website need to open when selected in the dropdown menu. Code: <input type="hidden" id="budget_min" name="budget_min" value="0" /> <input type="hidden" id="budget_max" name="budget_max" value="0" /> <select onchange="updatePriceLimit(this)"> <option value="http://othersite.com">-500.000 euros</option> <option value="500000-1000000">500.000 - 1.000.000 euros</option> <option value="1000000-2000000">1.000.000 - 2.000.000 euros</option> <option value="2000000-100000000">2.000.000+ euros</option> </select> <script type="text/javascript"> function updatePriceLimit(select) { if (select.value.search(/http/i)) { location.href=select.value; } else { var limit = select.value.split('-'); document.getElementById('budget_min').value = limit[0]; document.getElementById('budget_max').value = limit[1]; } } </script> TIA Hi guys. I was wondering if you maybe could help me with the following issue. I would like to make a menu that when you click it, a submenu slides beneath it, when you click it again it slides back up (so not automatically if you click another menu). I attached an image to clearify myself. This is what I came up with so far, but now I am stuck.. can somebody help me? http://www.webmention.com/menu.htm is the look I actually want.. seperated menu's and the submenu not 'in' the main menu.. Thanks! I have a working drop down menu on my "Facebook" icon at the top of my website. www.billboardfamily.com The menu works fine, but I would like for it to open to the left of the icon... should look something like the attached pic. I do not know enough about js to make this happen, any help would be great. Thanks in advance! anylinkmenu.js Code: //** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com //** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm //** January 29th, 2009: Script Creation date //**May 22nd, 09': v2.1 //1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link //2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images. //**June 1st, 09': v2.2 //1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section //**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready var dd_domreadycheck=false var anylinkmenu={ menusmap: {}, preloadimages: [], effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects dimensions: {}, getoffset:function(what, offsettype){ return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype] }, getoffsetof:function(el){ el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight} }, getdimensions:function(menu){ this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight, docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20, docheight:(window.innerHeight ||this.standardbody.clientHeight)-15, docscrollx:window.pageXOffset || this.standardbody.scrollLeft, docscrolly:window.pageYOffset || this.standardbody.scrollTop } if (!this.dimensions.dropmenuw){ this.dimensions.dropmenuw=menu.dropmenu.offsetWidth this.dimensions.dropmenuh=menu.dropmenu.offsetHeight } }, isContained:function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false }, setopacity:function(el, value){ el.style.opacity=value if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported el.style.MozOpacity=value if (el.filters){ el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")" } } }, showmenu:function(menuid){ var menu=anylinkmenu.menusmap[menuid] clearTimeout(menu.hidetimer) this.getoffsetof(menu.anchorobj) this.getdimensions(menu) var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead? posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw) } if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){ //drop up instead? posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge } if (this.effects.fade.enabled){ this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially if (this.effects.shadow.enabled) this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially } menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'}) if (this.effects.shadow.enabled){ //menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"}) menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'}) } if (this.effects.fade.enabled){ clearInterval(menu.animatetimer) menu.curanimatedegree=0 menu.starttime=new Date().getTime() //get time just before animation is run menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20) } }, revealmenu:function(menuid){ var menu=anylinkmenu.menusmap[menuid] var elapsed=new Date().getTime()-menu.starttime //get time animation has run if (elapsed<this.effects.fade.duration){ this.setopacity(menu.dropmenu, menu.curanimatedegree) if (this.effects.shadow.enabled) this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity) } else{ clearInterval(menu.animatetimer) this.setopacity(menu.dropmenu, 1) menu.dropmenu.style.filter="" } menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2 }, setcss:function(param){ for (prop in param){ this.style[prop]=param[prop] } }, setcssclass:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add" && !needle.test(el.className)) el.className+=" "+targetclass }, hidemenu:function(menuid){ var menu=anylinkmenu.menusmap[menuid] clearInterval(menu.animatetimer) menu.dropmenu.setcss({visibility:'hidden', left:0, top:0}) menu.shadow.setcss({visibility:'hidden', left:0, top:0}) }, getElementsByClass:function(targetclass){ if (document.querySelectorAll) return document.querySelectorAll("."+targetclass) else{ var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname var pieces=[] var alltags=document.all? document.all : document.getElementsByTagName("*") for (var i=0; i<alltags.length; i++){ if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1) pieces[pieces.length]=alltags[i] } return pieces } }, addDiv:function(divid, divclass, inlinestyle){ var el=document.createElement("div") if (divid) el.id=divid el.className=divclass if (inlinestyle!="" && typeof el.style.cssText=="string") el.style.cssText=inlinestyle else if (inlinestyle!="") el.setAttribute('style', inlinestyle) document.body.appendChild(el) return el }, getmenuHTML:function(menuobj){ var menucontent=[] var frag="" for (var i=0; i<menuobj.items.length; i++){ frag+='<li><a href="' + menuobj.items[i][1] + '" rel="nofollow" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n' if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){ menucontent.push(frag) frag="" } } if (typeof menuobj.cols=="undefined") return '<ul>\n' + menucontent.join('') + '\n</ul>' else{ frag="" for (var i=0; i<menucontent.length; i++){ frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n' } return frag } }, addEvent:function(targetarr, functionref, tasktype){ if (targetarr.length>0){ var rel="nofollow" target=targetarr.shift() if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)}) this.addEvent(targetarr, functionref, tasktype) } }, domready:function(functionref){ //based on code from the jQuery library if (dd_domreadycheck){ functionref() return } // Mozilla, Opera and webkit nightlies currently support this event if (document.addEventListener) { // Use the handy event callback document.addEventListener("DOMContentLoaded", function(){ document.removeEventListener("DOMContentLoaded", arguments.callee, false ) functionref(); dd_domreadycheck=true }, false ) } else if (document.attachEvent){ // If IE and not an iframe // continually check to see if the document is ready if ( document.documentElement.doScroll && window == window.top) (function(){ if (dd_domreadycheck) return try{ // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left") }catch(error){ setTimeout( arguments.callee, 0) return; } //and execute any waiting functions functionref(); dd_domreadycheck=true })(); } if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE this.addEvent([window], function(){functionref()}, "load"); }, addState:function(anchorobj, state){ if (anchorobj.getAttribute('data-image')){ var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0] if (imgobj){ imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image') } } else anylinkmenu.setcssclass(anchorobj, "selectedanchor", state) }, addState:function(anchorobj, state){ if (anchorobj.getAttribute('data-image')){ var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0] if (imgobj){ imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image') } } else anylinkmenu.setcssclass(anchorobj, "selectedanchor", state) }, setupmenu:function(targetclass, anchorobj, pos){ this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body var relattr=anchorobj.getAttribute("rel") dropmenuid=relattr.replace(/\[(\w+)\]/, '') var dropmenuvar=window[dropmenuid] var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV dropmenu.innerHTML=this.getmenuHTML(dropmenuvar) var menu=this.menusmap[targetclass+pos]={ id: targetclass+pos, anchorobj: anchorobj, dropmenu: dropmenu, revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover", orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud", shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow } menu.anchorobj._internalID=targetclass+pos menu.anchorobj._isanchor=true menu.dropmenu._internalID=targetclass+pos menu.shadow._internalID=targetclass+pos menu.dropmenu.setcss=this.setcss menu.shadow.setcss=this.setcss menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"}) this.setopacity(menu.shadow, this.effects.shadow.opacity) this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow var menu=anylinkmenu.menusmap[this._internalID] if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor anylinkmenu.showmenu(menu.id) anylinkmenu.addState(this, "add") } else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow clearTimeout(menu.hidetimer) } }, "mouseover") this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow if (!anylinkmenu.isContained(this, e)){ var menu=anylinkmenu.menusmap[this._internalID] menu.hidetimer=setTimeout(function(){ anylinkmenu.addState(menu.anchorobj, "remove") anylinkmenu.hidemenu(menu.id) }, anylinkmenu.effects.delayhide) } }, "mouseout") this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu var menu=anylinkmenu.menusmap[this._internalID] if ( this._isanchor && menu.revealtype=="click"){ if (menu.dropmenu.style.visibility=="visible") anylinkmenu.hidemenu(menu.id) else{ anylinkmenu.addState(this, "add") anylinkmenu.showmenu(menu.id) } if (e.preventDefault) e.preventDefault() return false } else menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide) }, "click") }, init:function(targetclass){ this.domready(function(){anylinkmenu.trueinit(targetclass)}) }, trueinit:function(targetclass){ var anchors=this.getElementsByClass(targetclass) var preloadimages=this.preloadimages for (var i=0; i<anchors.length; i++){ if (anchors[i].getAttribute('data-image')){ //preload anchor image? preloadimages[preloadimages.length]=new Image() preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image') } if (anchors[i].getAttribute('data-overimage')){ //preload anchor image? preloadimages[preloadimages.length]=new Image() preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage') } this.setupmenu(targetclass, anchors[i], i) } } } menucontents.js Code: var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name! anylinkmenu1.items=[ ["Fan Page", "http://www.facebook.com/BillboardFamily/"], ["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"], ["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"] //no comma following last entry! ] var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution. anylinkmenu2.items=[ ["Fan Page", "http://www.facebook.com/BillboardFamily/"], ["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"], ["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"] //no comma following last entry! ] var anylinkmenu3={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'} //Third menu variable. Same precaution. anylinkmenu3.cols={divclass:'column', inlinestyle:''} //menu.cols if defined creates columns of menu links segmented by keyword "efc" anylinkmenu3.items=[ ["Fan Page", "http://www.facebook.com/BillboardFamily/"], ["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"], ["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"] //no comma following last entry! ] var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#DFFDF4', linktarget:'_new'} //Second menu variable. Same precaution. anylinkmenu4.items=[ ["Fan Page", "http://www.facebook.com/BillboardFamily/"], ["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"], ["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"] //no comma following last entry! ] css for the menu Code: .selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/ } /* ######### Default class for drop down menus ######### */ .anylinkmenu{ position: absolute; left: 0; top: 0; visibility: hidden; font: normal 13px Arial; line-height: 18px; background: #000000; width: 85px; /* default width for menu */ } .anylinkmenu ul{ margin: 0; padding: 0; list-style-type: none; } .anylinkmenu ul li a{ width: 100%; display: block; color: #00AFEF; text-indent: 10px; padding: 2px 0; text-decoration: none; font-weight: bold; text-indent: 5px; } .anylinkmenu a:hover{ /*hover background color*/ background: black; color: #00AFEF; text-decoration: underline; } /* ######### Alternate multi-column class for drop down menus ######### */ .anylinkmenucols{ position: absolute; width: 350px; left: 0; top: 0; visibility: hidden; border: 1px solid black; padding: 10px; font: normal 12px Verdana; z-index: 100; /*zIndex should be greater than that of shadow's below*/ background: #E9E9E9; } .anylinkmenucols li{ padding-bottom: 3px; } .anylinkmenucols .column{ float: left; padding: 3px 8px; margin-right: 5px; background: #E0E0E0; } .anylinkmenucols .column ul{ margin: 0; padding: 0; list-style-type: none; } this alert should not be open when orange is selected but its popping Code: <html> <head> <script> function valDrop(val) { if (!document.getElementById('Select').value == ('ORG')) return false; else alert('ONLY ORANGE SHOULD BE SELECTED!!') return true; } </script> </head> <body> <select id="Select"> <option value="NONE">Select Location</option> <option value="APL">APPLE</option> <option value="ORG">ORANGE</option> <option value="MNG">MANGO</option> <option value="BNA">BANANA</option> <option value="PCH">PEACH</option> </select> <br> <input type='button', onclick="valDrop()", value='Submit' /> </body> </html> I'm searching for a (customizable) script which allows me to make a simple drop-down menu. It might not look like a whole lot, but there's more to it than it seems. With any menu builder one can make such a menu BUT since I am restricted to a non html regular font I have to use (small) images with white on black text in that specific font, in order to show always this font to a visitor. Since the page background will also be black, the menu just looks like simple text. any help, advice or directions are highly appreciated. |