SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict The Mog's Avatar
    Join Date
    Dec 2002
    Location
    Manchester UK
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Three Way select List

    Hi All,

    i want to achieve the following but unfortunatly i don't know much about JS and am sure this is the only way to do it,

    I would really apperieate any help and am sure that loads of you JS fundies have sample code that i could use.

    I want 3 drop down boxes namely:

    Area
    Country
    City
    (I will pull theses from my DB and assign them to the JS dynamically)

    when you choose a area the country box should populate and when you select the country the city box.

    all the boxes should be default to "All"

    here is some code it sort of works but the problems are as follows....
    on loading its not displaying "All"

    and if you change the area box the 3rd box is not clearing and defaulting to all.

    in my db i will hold the data as follows

    id | parent_id | name
    1 0 Africa
    2 1 South Africa
    3 2 Johannesburg

    I am sure you get the Idea

    Code:
      
    <script language="JavaScript">
    function setOptions(chosen) {
     var selbox = document.myform.country;
      selbox.options.length = 0;
     if (chosen == " " || chosen == "all") {
    	 selbox.options[selbox.options.length] = new Option('All','all');  
     }
     <?php
     for ($i = 1; $i <= 10; $i++){
     ?>
     if (chosen == "<?php print $i; ?>") {
    	 selbox.options[selbox.options.length] = new Option('All','all');
    	 <?php 
       for($j=1; $j <= 10; $j++){
      ?>
    	selbox.options[selbox.options.length] = new Option('<?php print $i; ?> - <?php print $j; ?>','<?php print $j; ?>');
      <?php
    	}
      ?>
     }
     <?php
     }
     ?>
    }
    function setOptions2(chosen) {
     var selbox = document.myform.city;
      selbox.options.length = 0;
     if (chosen == " " || chosen == "all") {
    	 selbox.options[selbox.options.length] = new Option('All','all'); 
     }
     <?php
     for ($i = 1; $i <= 10; $i++){
     ?>
     if (chosen == "<?php print $i; ?>") {
    	 selbox.options[selbox.options.length] = new Option('All','all');
    	 <?php 
       for($j=1; $j <= 10; $j++){
      ?>
    	selbox.options[selbox.options.length] = new Option('<?php print $i; ?> - <?php print $j; ?>','<?php print $j; ?>');
      <?php
    	}
      ?>
     }
     <?php
     }
     ?>
    }
    </script>
    <form action="info.php" method="post" enctype="multipart/form-data" name="myform">
      <div align="center">
    <select name="area" size="1"
    onchange="setOptions(document.myform.area.options[document.myform.area.selectedIndex].value);">
    	  <option value="all" selected>All</option>
    	 <?php
      for($i = 1; $i <= 10; $i++){
    	print '<option value="'.$i.'">'.$i.'</option>';
      }
      ?>
    	</select><br />
    	<select name="country" size="1" onchange="setOptions2(document.myform.country.options[document.myform.country.selectedIndex].value);">
    	</select>
    	<br>
    	<select name="city" size="1" id="city">
    	</select>
    	<br>
    	<input name="submit" type="submit" id="submit" value="submit">
    </div></form>
    in my sample code i am just doing a basic loop to view the desired effect

    Thanks for any help

    K-

  2. #2
    SitePoint Zealot sajjad's Avatar
    Join Date
    May 2005
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello dear, it's so simple
    check this page http://www.trans4mind.com/personal_d...tripleMenu.htm
    it has got the working example


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •