1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Onchange select

Discussion in 'JavaScript' started by adamjblakey, Aug 17, 2009.

0
  1. #1
    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
     
    adamjblakey, Aug 17, 2009 IP
  2. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    kblessinggr, Aug 17, 2009 IP
  3. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #3
    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:
     
    adamjblakey, Aug 17, 2009 IP
  4. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #4
    Can anyone help me on this one?
     
    adamjblakey, Aug 18, 2009 IP
  5. Mastermaniac

    Mastermaniac Peon

    Messages:
    128
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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):
     
    Mastermaniac, Aug 18, 2009 IP
  6. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #6
    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.
     
    adamjblakey, Aug 18, 2009 IP
  7. Mastermaniac

    Mastermaniac Peon

    Messages:
    128
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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 :)
     
    Mastermaniac, Aug 18, 2009 IP
  8. adamjblakey

    adamjblakey Active Member

    Messages:
    1,121
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #8
    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.
     
    adamjblakey, Aug 18, 2009 IP
  9. Mastermaniac

    Mastermaniac Peon

    Messages:
    128
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Just make another similar function..

    Use the same kind of code..

    I mean the IDs, Values and another Paragraph container :)
     
    Mastermaniac, Aug 19, 2009 IP