Hi, I have 2 lists in a form one for a type of property and the other for price type. What i want to do is have a function so if i select property "Flats" then the price type menu will alter to Per Week. This is what i have so far but don't know how to go after this? function doChange() { var sel = document.forms[0].property_type.selectedIndex; if (document.forms[0].property_type[sel].value = "Flat") { } } Code (markup): Cheers, Adam
Do you have the HTML to go with that code, can't really tell you how to alter the rest if I don't know what the html that needs altering is.
Here you go: <form> <select name="price_type" id="price_type" style="width:120px;"> <option value="P/M">Let (Per Month)</option> <option value="P/W">Let (Per Week)</option> <option value="N/A">Buy</option> </select> <select name="property_type" id="property_type" style="width:120px;"> <option value="">Type</option> <option value="Detached">Detached</option> <option value="Semi Detached">Semi Detached</option> <option value="Terraced">Terraced</option> <option value="Flat">Flat</option> <option value="Apartment">Apartment</option> <option value="Bungalow">Bungalow</option> <option value="Dormer Bungalow">Dormer Bungalow</option> <option value="Maisonette">Maisonette</option> </select> </form> HTML:
You can use this kind of code! Simple JavaScript function with Switch function! <html> <body id="myid" title="mytitle"> <script type="text/javascript"> function change(){ var x=document.getElementById("price"); var n=document.forms[0].property_type.selectedIndex; var opt=document.forms[0].property_type.options[n].value; switch (opt){ case "Detached": x.innerHTML="Price 1"; break; case "Semi Detached": x.innerHTML="Price 2"; break; case "Detached": x.innerHTML="Price 3"; break; case "Terraced": x.innerHTML="Price 4"; break; case "Flat": x.innerHTML="Price 5"; break; case "Apartment": x.innerHTML="Price 6"; break; case "Bungalow": x.innerHTML="Price 7"; break; case "Dormer Bungalow": x.innerHTML="Price 8"; break; case "Maisonette": x.innerHTML="Price 9"; break; default: x.innerHTML="Please select a Property Type!" } } </script> <form> <select name="price_type" id="price_type" style="width:120px;"> <option value="P/M">Let (Per Month)</option> <option value="P/W">Let (Per Week)</option> <option value="N/A">Buy</option> </select> <select name="property_type" id="property_type" style="width:120px;" onchange="change()"> <option value="">Type</option> <option value="Detached">Detached</option> <option value="Semi Detached">Semi Detached</option> <option value="Terraced">Terraced</option> <option value="Flat">Flat</option> <option value="Apartment">Apartment</option> <option value="Bungalow">Bungalow</option> <option value="Dormer Bungalow">Dormer Bungalow</option> <option value="Maisonette">Maisonette</option> </select> <p id="price"></p> </form> </body> </html> Code (markup):
Thank you your reply, how would i include this into my form though? As this will just just <p id="price"></p> but i want it to update the actual list.
Copy the whole source and paste it here : http://www.w3schools.com/js/tryit.asp?filename=try_dom_body_title Change the options of the second drop down box.. You will understand.. If any other doubt, feel free to ask
Thank you for your reply, I understand how it works and have it working in its current form already, what i don't understand is how to implement this so that it will update the first select menu.
Just make another similar function.. Use the same kind of code.. I mean the IDs, Values and another Paragraph container