I have a question on pull down menus

@thickmeatNov 29.2005

hey do you know anythig about how to put a certain pull down menu on your web page? See the kind I want is this: On my page there is 2 pull down menu boxes. One shows all the States of the U.S., and the other one is for all the cities,suburbs etc. Now how i want it is whenever I click on a State, I need for the second pulldown menu box(the one with all the cities, suburbs, etc.) to change according to that particular state so that it will match. It will then have the correct cities,suburbs, etc. matched with the correct state. I will have to do this for every state. What kind of pull down menu is that? and how do I set it up like that? If you can’t help me, do you know who I will need to contact for help with this issue?

to post a comment

JavaScript

5 Comments(s) _↴

@JPnycNov 29.2005 — #For that much information, you probably need to pull the info from a database. Were it just for a few you could hard code it right into the page but with 50 states and the exponentially higher number of cities and suburbs involved, the page would be ridiculously ENORMOUS. In my opinion this requires a database and some type of serverside scripting, depending on which languages are available to you

@thickmeatauthorNov 29.2005 — #how do i pull the information from a database? will that be helpful in providing me the source i need?

@JPnycNov 29.2005 — #What kind of hosting do you have? Do you know what serverside languages your host supports? That will determine the rest.

@harrisonadNov 29.2005 — #The requirement of creating two select boxes which are interlinked has come up a few times on the forum. But I will try to explain it again.

Only my example is different so you need to read listen carefully and apply it to your problem.

For example we have two select boxes (Company and Employee). When the page is loaded, the company is set to "All" and the Employee select box contains all employees for all companies. If the client

changes the company box however only those employees from within that company are shown. The method could also be used for things like countries and states, manufacturers and car makes etc.

First, we build the FORM

<i>
 </i>  &lt;form method="POST" name="myform"&gt; 
 
 <i>    </i>&lt;input type="hidden" name="tid" value="0"&gt; 
 <i>    </i>&lt;table&gt; 
 <i>    </i>  &lt;tr&gt; 
 <i>    </i>    &lt;td&gt;Employee&lt;/td&gt; 
 <i>    </i>    &lt;td&gt; 
 <i>    </i>      &lt;select name="company" onchange="javascript:fillSelect();"&gt; 
 <i>    </i>      &lt;option value="0"&gt;All&lt;/option&gt; 
 <i>    </i>      &lt;option value="10" &gt;Alpha Co.&lt;/option&gt; 
 <i>    </i>      &lt;option value="20" &gt;Beta Co.&lt;/option&gt; 
 <i>    </i>      &lt;option value="30" &gt;Gamma Co.&lt;/option&gt; 
 <i>    </i>      &lt;option value="40" &gt;Delta Co.&lt;/option&gt; 
 <i>    </i>      &lt;option value="50" &gt;Epsilon Co.&lt;/option&gt; 
 <i>    </i>      &lt;/select&gt; 
 <i>    </i>       ... 
 <i>    </i>      &lt;select name="employee"&gt; 
 <i>    </i>        &lt;option value="11"&gt;Anna&lt;/option&gt; 
 <i>    </i>        &lt;option value="12"&gt;Andrew&lt;/option&gt; 
 <i>    </i>        &lt;option value="15"&gt;Andrea&lt;/option&gt; 
 <i>    </i>        &lt;option value="16"&gt;Annakin&lt;/option&gt; 
 <i>    </i>        &lt;option value="21"&gt;Bill&lt;/option&gt; 
 <i>    </i>        &lt;option value="22"&gt;Bob&lt;/option&gt; 
 <i>    </i>        &lt;option value="23"&gt;Bernie&lt;/option&gt; 
 <i>    </i>        &lt;option value="35"&gt;Charles&lt;/option&gt; 
 <i>    </i>        &lt;option value="36"&gt;Camila&lt;/option&gt; 
 <i>    </i>        &lt;option value="37"&gt;Connie&lt;/option&gt; 
 <i>    </i>        &lt;option value="38"&gt;Constance&lt;/option&gt; 
 <i>    </i>        &lt;option value="902"&gt;Daniel&lt;/option&gt; 
 <i>    </i>        &lt;option value="204"&gt;Darla&lt;/option&gt; 
 <i>    </i>        &lt;option value="748"&gt;Danny&lt;/option&gt; 
 <i>    </i>        &lt;option value="18"&gt;Edmund&lt;/option&gt; 
 <i>    </i>        &lt;option value="199"&gt;Edgar&lt;/option&gt; 
 <i>    </i>        &lt;option value="200"&gt;Elisabeth&lt;/option&gt; 
 <i>    </i>        &lt;option value="284"&gt;Eugene&lt;/option&gt; 
 <i>    </i>        &lt;option value="987"&gt;Emma&lt;/option&gt; 
 <i>    </i>        &lt;option value="6"&gt;Emily&lt;/option&gt; 
 <i>    </i>       &lt;/select&gt; 
 <i>    </i>     &lt;/td&gt; 
 <i>    </i>  &lt;/tr&gt; 
 
 <i>    </i>&lt;/table&gt; 
 &lt;/form&gt;

Then, we write the javascript that will process the form

<i>
 </i>  &lt;script language="Javascript"&gt; 
 &lt;!-- 
 
 <i>    </i>  function emptySelect() 
 <i>    </i>  { 
 <i>    </i>    var selectbox2=document.myform.employee; 
 <i>    </i>    for (i=selectbox2.length;i&gt;=0;i--) { 
 <i>    </i>      selectbox2.options[i]=null; 
 <i>    </i>    } 
 <i>    </i>  } 
 
 <i>    </i>  function fillSelect() 
 <i>    </i>  { 
 <i>    </i>    emptySelect(); 
 
 <i>    </i>    var selectbox1=document.myform.company; 
 <i>    </i>    var selectbox2=document.myform.employee; 
 <i>    </i>   var use_index=selectbox1.selectedIndex; 
 <i>    </i>    if (use_index == 0) { 
 <i>    </i>     // Need all of selectbox2 possibilties 
 <i>    </i>     for(i=1;i&lt;companies.length;i++) { 
 <i>    </i>        my_index=companies[i]; 
 <i>    </i>      for (ia=0;ia&lt;employee_name[my_index].length;ia++) { 
 <i>    </i>          myOption = new Option(employee_name[my_index][ia],employee_value[my_index][ia]) 
 <i>    </i>          optionPos = selectbox2.options.length 
 <i>    </i>          selectbox2.options[optionPos]=myOption 
 <i>    </i>        } 
 <i>    </i>      } 
 <i>    </i>    } else { 
 <i>    </i>    var my_index=selectbox1.options[use_index].value; 
 <i>    </i>     for (i=0;i&lt;employee_name[my_index].length;i++) { 
 <i>    </i>       myOption = new Option(employee_name[my_index][i],employee_value[my_index][i]) 
 <i>    </i>       optionPos = selectbox2.options.length 
 <i>    </i>       selectbox2.options[optionPos]=myOption 
 <i>    </i>     } 
 <i>    </i>    } 
 <i>    </i>  } 
 
 <i>    </i> var employee_name=Array(); 
 <i>    </i> var employee_value=Array(); 
 <i>    </i>  var companies=new Array(0,10,20,30,40,50); 
 <i>    </i>  employee_name[10]=new Array("Anna","Andrew","Andrea","Annakin"); 
 <i>    </i>  employee_name[20]=new Array("Bill","Bob","Bernie"); 
 <i>    </i>  employee_name[30]=new Array("Charles","Camila","Connie","Constance"); 
 <i>    </i>  employee_name[40]=new Array("Daniel","Darla","Danny"); 
 <i>    </i>  employee_name[50]=new Array("Edmund","Edgar","Elisabeth","Eugene","Emma","Emily"); 
 <i>    </i>  employee_value[10]=new Array(11,12,15,16); 
 <i>    </i>  employee_value[20]=new Array(21,22,23); 
 <i>    </i>  employee_value[30]=new Array(35,36,37,38); 
 <i>    </i>  employee_value[40]=new Array(902,204,748); 
 <i>    </i>  employee_value[50]=new Array(18,199,200,284,987,6); 
 <i>    </i>//--&gt; 
 &lt;/script&gt;

Now, if you will run this script, you will see that the second selection box is changing it's contents according to what the user select on the first selection box.

Using my example, you may probably know that to do next with your problem. Apply it.

@thickmeatauthorNov 30.2005 — #Hey Harrison, I have a question. I am learning this HTML thing one step at a time and I received the code that you sent to me for the pull down menu. Man that is alot of information, but I am almost sure that is the kind of code that I need so I want you to show me an example of how i would use a part of this code in each pull down menu. Now using the code that you sent me let's say I have one pull down menu that has all the states, but we are going to use the state:Alaska, and whenever members click on it, I want them to choose the city, suburb, etc. area that they live in. So the choices that are in the second pull down menu for the State Alaska are:Anchorage, Fairbanks, & Juneau. Could you show me a demonstration of how I will set this up to show the correct cities, suburbs, etc. whenever I click on the state Alaska? If you only show me one example, I will be able to apply it to all the other States and their cities, suburbs, etc. Thanks man

Also in #JavaScript _↴

Object doesn't support property or method if display:none, then do something...Using ajax to display contents of a text file

Success!

Help @thickmeat spread the word by sharing this article on Twitter...

Tweet This

I have a question on pull down menus

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

I have a question on pull down menus

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴