Drop down Box Help

Question

hallinan 0 Light Poster

14 Years Ago

I have a drop down box which is working but I want to put it on the same page twice because the document.drop_list.? is hard coded it will not work if I try and use it twice on the same page I have tried sending the id to the javascript but it didn't work. Any Idea How Id do this ?
This is what I have done as of now.

<SCRIPT LANGUAGE="JavaScript">


function fillCategory(){ 
		 // this function is used to fill the category list on load
		 addOption(document.drop_list.Category, "CORK", "CORK", "CORK");
		 addOption(document.drop_list.Category, "KERRY", "KERRY", "KERRY");
				
	}

	function SelectBarnoy(obj){
		// ON selection of category this function will work
		  removeAllOptions(document.drop_list.obj);
	      addOption(document.drop_list.obj, "", "Barnoy", "");

		  if(document.drop_list.Category.value == "CORK"){
					 addOption(document.drop_list.obj,"WEST CARBERY (WEST DIVISION)", "WEST CARBERY (WEST DIVISION)");
			 }
		 
		  if(document.drop_list.Category.value == "KERRY"){
					  addOption(document.drop_list.obj,"ABAB", "ABAB");
					  addOption(document.drop_list.obj,"KSJDJH", "KSJDJH");
					  }
					  
					  
		}


function SelectParish(){
		// ON selection of category this function will work
		  removeAllOptions(document.drop_list.Parish);
	      addOption(document.drop_list.Parish, "", "Parish", "");
		  if(document.drop_list.Category.value == "CORK"){
						  if(document.drop_list.Barnoy.value == "WEST CARBERY (WEST DIVISION)"){
						  addOption(document.drop_list.Parish,"KILCROHANE", "KILCROHANE");
						  addOption(document.drop_list.Parish,"DURRUS", "DURRUS");
						  addOption(document.drop_list.Parish,"KILMOCOMOGE", "KILMOCOMOGE");
						  addOption(document.drop_list.Parish,"KILCOE", "KILCOE");
						  addOption(document.drop_list.Parish,"CAHERAGH", "CAHERAGH");
						  addOption(document.drop_list.Parish,"SKULL", "SKULL");
						  addOption(document.drop_list.Parish,"KILMOE", "KILMOE");
				}
		  }
		  
		  if(document.drop_list.Category.value == "KERRY"){
				if(document.drop_list.Barnoy.value == "ABAB"){
							addOption(document.drop_list.Parish,"ASDA", "ASDA");
							}
				if(document.drop_list.Barnoy.value == "KSJDJH"){
					addOption(document.drop_list.Parish,"JKDJDF", "JKDJDF");
				  }
				 }
 }

function SelectTownLand(){
		// ON selection of category this function will work
		  removeAllOptions(document.drop_list.TownLand);
	      addOption(document.drop_list.TownLand, "", "TownLand", "");
		  
		  
		  if(document.drop_list.Category.value == "CORK"){
		  if(document.drop_list.Barnoy.value == "WEST CARBERY (WEST DIVISION)"){
		  if(document.drop_list.Parish.value == "KILCROHANE"){}
		  if(document.drop_list.Parish.value == "DURRUS"){}
		  if(document.drop_list.Parish.value == "KILMOCOMOGE"){}
		  if(document.drop_list.Parish.value == "KILCOE"){}
		  if(document.drop_list.Parish.value == "CAHERAGH"){}
		  if(document.drop_list.Parish.value == "SKULL"){}
		  if(document.drop_list.Parish.value == "KILMOE"){
					addOption(document.drop_list.TownLand,"1", "BALLYRISODE");
					addOption(document.drop_list.TownLand,"2", "KILMOE");
					addOption(document.drop_list.TownLand,"3", "CAHERAGH");
					addOption(document.drop_list.TownLand,"4", "DURRUS");
					addOption(document.drop_list.TownLand,"5", "KILCOE");
					addOption(document.drop_list.TownLand,"6", "KILCROHANE");
					addOption(document.drop_list.TownLand,"7", "KILMOCOMOGE");
					addOption(document.drop_list.TownLand,"9", "ASDA");
					addOption(document.drop_list.TownLand,"10", "TOOR");
					addOption(document.drop_list.TownLand,"11", "DUNLOUGH");
					addOption(document.drop_list.TownLand,"12", "GORTBRACK");
					addOption(document.drop_list.TownLand,"13", "KNOCKATASSONIG");
					addOption(document.drop_list.TownLand,"14", "ALTER");
					addOption(document.drop_list.TownLand,"15", "BALTEEN");
					addOption(document.drop_list.TownLand,"16", "KEALFADDA")
					}
				}
			}
					
					
					if(document.drop_list.Category.value == "KERRY"){
						if(document.drop_list.Barnoy.value == "ABAB"){
								if(document.drop_list.Parish.value == "ASDA"){}
							}
					if(document.drop_list.Barnoy.value == "KSJDJH"){
							if(document.drop_list.Parish.value == "JKDJDF"){}
						}
					}
}


function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}
</SCRIPT>


<script type="text/javascript" src="../js/toggleSearch.js"></script>


</head>
<body  onload="fillCategory();">
<div id="main">
	
	<form action="" method="POST" id="search">
          <fieldset>
          <legend>Search</legend>
          <p>

            <input type="text" size="17" name="town" class="input-text" />
            &nbsp;
            <input type="submit" value="OK" class="input-submit-02" />
            <br />
        
		 </form>
            <p>   
			<FORM name="drop_list" action=""  > 
					County:<SELECT  NAME="Category" onChange="SelectBarnoy(Barnoy);javascript:toggleSearch('Barnoy')" >
								<Option value="">Category</option>

						   </SELECT>&nbsp;
						   <BR>
					Barnoy:<SELECT id="Barnoy" NAME="Barnoy" onChange="SelectParish();javascript:toggleSearch('Parish')"	 style="display:none;">
								<Option value="">Barnoy</option>
						   </SELECT>
						   <BR>
					Parish:<SELECT  id="Parish" NAME="Parish"  onChange="SelectTownLand();javascript:toggleSearch('TownLand')" style="display:none;">

								<Option value="">Parish</option>
						   </SELECT>&nbsp;
						   <BR>
					TownLand:<SELECT  id="TownLand" NAME="TownLand"  style="display:none;">
								<Option value="">TownLand</option>
						   </SELECT>&nbsp;
				  </FORM>  
            </p>

          </div>
          <!-- /search-options -->
          </fieldset>
        </form>		

			
</div>
</body>
</html>

Any help would be appreciated

javascript

1 Contributor
1 Reply
96 Views
6 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by hallinan

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hallinan 0 Light Poster · Answer 1 · 2010-03-20T01:33:54+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CORK AND KERRY PLACENAMES</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />


<SCRIPT LANGUAGE="JavaScript">


function fillCategory(obj){ 
         // this function is used to fill the category list on load
         addOption(obj, "CORK", "CORK", "CORK");
         addOption(obj, "KERRY", "KERRY", "KERRY");

    }

    function SelectBarnoy(obj,pre){
        // ON selection of category this function will work
            alert(obj);
          removeAllOptions(obj);
          addOption(obj, "", "Barnoy", "");

          if(pre == "CORK"){
                     addOption(obj,"WEST CARBERY (WEST DIVISION)", "WEST CARBERY (WEST DIVISION)");
             }

          if(pre == "KERRY"){
                      addOption(obj,"ABAB", "ABAB");
                      addOption(obj,"KSJDJH", "KSJDJH");
                      }


        }


function SelectParish(obj,pre,pre2){
        // ON selection of category this function will work
          removeAllOptions(obj);
          addOption(obj, "", "Parish", "");
          if(pre == "CORK"){
                          if(pre2 == "WEST CARBERY (WEST DIVISION)"){
                          addOption(obj,"KILCROHANE", "KILCROHANE");
                          addOption(obj,"DURRUS", "DURRUS");
                          addOption(obj,"KILMOCOMOGE", "KILMOCOMOGE");
                          addOption(obj,"KILCOE", "KILCOE");
                          addOption(obj,"CAHERAGH", "CAHERAGH");
                          addOption(obj,"SKULL", "SKULL");
                          addOption(obj,"KILMOE", "KILMOE");
                }
          }

          if(pre == "KERRY"){
                if(pre2 == "ABAB"){
                            addOption(obj,"ASDA", "ASDA");
                            }
                if(pre2 == "KSJDJH"){
                    addOption(obj,"JKDJDF", "JKDJDF");
                  }
                 }
 }

function SelectTownLand(obj,pre,pre2,pre3){
        // ON selection of category this function will work
          removeAllOptions(obj);
          addOption(obj, "", "TownLand", "");


          if(pre == "CORK"){
          if(pre2 == "WEST CARBERY (WEST DIVISION)"){
          if(pre3 == "KILCROHANE"){}
          if(pre3 == "DURRUS"){}
          if(pre3 == "KILMOCOMOGE"){}
          if(pre3 == "KILCOE"){}
          if(pre3 == "CAHERAGH"){}
          if(pre3 == "SKULL"){}
          if(pre3 == "KILMOE"){
                    addOption(obj,"1", "BALLYRISODE");
                    addOption(obj,"2", "KILMOE");
                    addOption(obj,"3", "CAHERAGH");
                    addOption(obj,"4", "DURRUS");
                    addOption(obj,"5", "KILCOE");
                    addOption(obj,"6", "KILCROHANE");
                    addOption(obj,"7", "KILMOCOMOGE");
                    addOption(obj,"9", "ASDA");
                    addOption(obj,"10", "TOOR");
                    addOption(obj,"11", "DUNLOUGH");
                    addOption(obj,"12", "GORTBRACK");
                    addOption(obj,"13", "KNOCKATASSONIG");
                    addOption(obj,"14", "ALTER");
                    addOption(obj,"15", "BALTEEN");
                    addOption(obj,"16", "KEALFADDA")
                    }
                }
            }


                    if(pre == "KERRY"){
                        if(pre2 == "ABAB"){
                                if(pre3 == "ASDA"){}
                            }
                        if(pre2 == "KSJDJH"){
                            if(pre3 == "JKDJDF"){}
                        }
                    }
}


function removeAllOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        //selectbox.options.remove(i);
        selectbox.remove(i);
    }
}


function addOption(selectbox, value, text )
{
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;

    selectbox.options.add(optn);
}
</SCRIPT>


<script type="text/javascript" src="../js/toggleSearch.js"></script>


</head>
<body  onload="fillCategory(document.drop_list.Category);">
<div id="main">

    <form action="" method="POST" id="search">
          <fieldset>
          <legend>Search</legend>
          <p>

            <input type="text" size="17" name="town" class="input-text" />
            &nbsp;
            <input type="submit" value="OK" class="input-submit-02" />
            <br />

         </form>
            <p>   
            <FORM name="drop_list" action=""  > 
                    County:<SELECT  NAME="Category" onChange="SelectBarnoy(document.drop_list.Barnoy,document.drop_list.Category.value);javascript:toggleSearch('Barnoy')" >
                                <Option value="">Category</option>

                           </SELECT>&nbsp;
                           <BR>
                    Barnoy:<SELECT id="Barnoy" NAME="Barnoy" onChange="SelectParish(document.drop_list.Parish,document.drop_list.Category.value,document.drop_list.Barnoy.value);javascript:toggleSearch('Parish')"   style="display:none;">
                                <Option value="">Barnoy</option>
                           </SELECT>
                           <BR>
                    Parish:<SELECT  id="Parish" NAME="Parish"  onChange="SelectTownLand(document.drop_list.TownLand,document.drop_list.Category.value,document.drop_list.Barnoy.value,document.drop_list.Parish.value);javascript:toggleSearch('TownLand')" style="display:none;">

                                <Option value="">Parish</option>
                           </SELECT>&nbsp;
                           <BR>
                    TownLand:<SELECT  id="TownLand" NAME="TownLand"  style="display:none;">
                                <Option value="">TownLand</option>
                           </SELECT>&nbsp;
                  </FORM>  
            </p>

          </div>
          <!-- /search-options -->
          </fieldset>
        </form>      


</div>
</body>
</html>