mkaplan

Create forms based on previous selection

Aug 16th, 2011
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.09 KB | None | 0 0
  1. <?php /*See http://www.javascriptkit.com/script/script2/triplecombo.shtml */ ?>
  2.  
  3.  
  4.  
  5. <script type="text/javascript">
  6.  
  7. var categories = [];
  8. categories["startList"] = ["Wearing Apparel","Books"]
  9. categories["Wearing Apparel"] = ["Men","Women","Children"];
  10. categories["Books"] = ["Biography","Fiction","Nonfiction"];
  11. categories["Men"] = ["Shirts","Ties","Belts","Hats"];
  12. categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
  13. categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
  14. categories["Biography"] = ["Contemporay","Historical","Other"];
  15. categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
  16. categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
  17.  
  18. var nLists = 3; // number of select lists in the set
  19.  
  20. function fillSelect(currCat,currList){
  21.     var step = Number(currList.name.replace(/\D/g,""));
  22.     for (i=step; i<nLists+1; i++) {
  23.         document.forms['tripleplay']['List'+i].length = 1;
  24.         document.forms['tripleplay']['List'+i].selectedIndex = 0;
  25.     }
  26.     var nCat = categories[currCat];
  27.     for (each in nCat) {
  28.         var nOption = document.createElement('option');
  29.         var nData = document.createTextNode(nCat[each]);
  30.         nOption.setAttribute('value',nCat[each]);
  31.         nOption.appendChild(nData);
  32.         currList.appendChild(nOption);
  33.     }
  34. }
  35.  
  36. function getValue(L3, L2, L1) {
  37.     alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
  38. }
  39.  
  40. function init() {
  41.     fillSelect('startList',document.forms['tripleplay']['List1'])
  42. }
  43.  
  44. navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);   
  45.  
  46. </script>
  47.  
  48. <form name="tripleplay" action="">
  49. <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
  50.     <option selected>Make a selection</option>
  51. </select>
  52. &nbsp;
  53. <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
  54.     <option selected>Make a selection</option>
  55. </select>
  56. &nbsp;
  57. <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
  58.     <option selected >Make a selection</option>
  59. </select>
  60. </form>
Advertisement
Add Comment
Please, Sign In to add comment