Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 483
  • Last Modified:

dynamic sub drop-down menu

Hello, i want to make a dynamic sub drop-down menu which will work as the following:

i have a form to add a property in a real estate website one of it's fields is property type i.e (building, villa, apartment) what i want to do is when the user chose the property type let's say villa, another drop-down menu will be generated and will show options depending on the property type which in this case it is villa

here is the code for the property type form:
<select name="PropertyType">
 
               		<option value="1">Apartment</option>
                    
					<option value="2">Villa</option>
                    
               		</select>

Open in new window

0
MrFahad
Asked:
MrFahad
  • 5
  • 2
1 Solution
 
NerdsOfTechTechnology ScientistCommented:
You can use a "light load" javascript "dynamic" dropdown to perform this.
Here is an example from javascriptsource.com

If you want a true dynamic approach (yet, slightly much more taxing on your server) use AJAX and a database to pull from.

-NerdsOfTech

<!-- TWO STEPS TO INSTALL DROPDOWN BOX POPULATION:
 
  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->
 
<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
 
<HEAD>
 
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Revised by: DeWayne Whitaker :: http://www.aecdfw.com
Original by: Andrew Berry */
 
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
 
arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;
 
arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;
 
arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;
 
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
 
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
 
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
 
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
 
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
 
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
 
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
 
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
 
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
 
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
  // controlToPopulate.add(myEle) ;
  controlToPopulate.appendChild(myEle)
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute('value',x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}
 
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
  }
  // ADD Default Choice - in case there are no values
  myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","0");
  controlToPopulate.appendChild(myEle);
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute("value",x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}
// -->
</script>
</HEAD>
 
<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
 
<BODY>
 
<form name=form>
<table align="center">
  <tr>
    <td>
      <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
        <option value="0" selected>[SELECT]</option>
        <option value="1">Land</option>
        <option value="2">Sea</option>
        <option value="3">Air</option>
      </select>
    </td><td>
      <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
      </select>
      <select id="thirdChoice" name="thirdChoice">
      </select>
    </td>
  </tr>
</table>
</form>
 
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Open in new window

0
 
NerdsOfTechTechnology ScientistCommented:
Save the code as an html file to see it work or goto for live demo on how it can work for you:

http://javascript.internet.com/forms/dropdown-box-population.html
0
 
MrFahadAuthor Commented:
what part of the code should i change if i want to change what appears in the sub drop-down?
0
Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

 
NerdsOfTechTechnology ScientistCommented:
Change the first list in the <SELECT> html area

for the subsequent "levels" change the arrItems javascript

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3; <- make this equal to the CORRESPONING PARENET "value" of the <option value=""> inside <select> area

-NerdsOfTech

0
 
MrFahadAuthor Commented:
can't we make the subsequent levels hidden until the the value from the parent is chosen
like: http://www.arencore.com/

check the rentel search
0
 
NerdsOfTechTechnology ScientistCommented:
For each SUBLEVEL to a SUBLEVEL

For example:
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5 <-make this equal to the CORRESPONDING PARENT arrItems1[****5****] area where in this example 5 is the parent

Therefore this:
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;
would be the parent of arrItems2[57] (BMW Z3)
0
 
NerdsOfTechTechnology ScientistCommented:
In your above referenced site the SOURCE CODE shows they are doing it with AJAX where the selection is ENVOKING a php response to SHOW the RESULTS from the underlying PHP "processor" page.

Basically it is not really just a dynamic dropdown you are after - but a dropdown that envokes a custom response.

Search for AJAX documentation so that you can emulate this.

Best regards,
-Nerds Of Tech
0

Featured Post

Get quick recovery of individual SharePoint items

Free tool – Veeam Explorer for Microsoft SharePoint, enables fast, easy restores of SharePoint sites, documents, libraries and lists — all with no agents to manage and no additional licenses to buy.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now