By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,067 Members | 456 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,067 IT Pros & Developers. It's quick & easy.

Filter a 2nd dropdown based on selection from 1st dropdown.

P: 57
Hi all.

I have two drop down menus, the first a list of Departments, the second a list of Sections.

Each Department has a set of Setions, so the Sections dropdown contains complete list of all Sections for every Department. I would like to filter out the Section dropdown based on what Department the user selects, to stop the user selecting a Section not relevant to the chosen Department.

The Section list is very long other wise I'd just hard code a few lists and hide/unhide based on the selection made in Departments.

Now, the Department list contains a value (which is the CODE for the Department) and for the user experience it contains the textual Department Description, eg 'I.T' displays as I.T. but the form would submit '1', 'Personnel' would submit '2' etc.etc.

The same applies for the Sections list, IT Systems would for example submit the value of 001, IT Networks would submit 002 etc etc.

Theer is a link between the two lists, in that the Section lines also include it's department code, so when the Department is Select Javascirpt would use the returned value (eg '1') and look through the list of Sections for all prefixed with '1'.

Here's a sample of each Select box.

Expand|Select|Wrap|Line Numbers
  1.         <option value="None" selected>* * Please Select * *</option> 
  2.         <option value="0010">I.T</option> 
  3.         <option value="0020">Personnel</option> 
  4.         <option value="0030">Busness</option> 
Expand|Select|Wrap|Line Numbers
  1. select size="1" name="SECTEST" id="SECTEST"> 
  2.         <option value="None" selected>* * Please Select * *</option> 
  3.         <option value="0001">0010|EMERGENCY PLANNING</option> 
  4.         <option value="0002">0010|HEALTH AND SAFETY</option> 
  5.         <option value="0003">0010|PRESS AND PUBLIC RELATIONS</option> 
  6.         <option value="9998">0010|GENERAL (CHIEF EXECUTIVE)</option> 
  7.         <option value="0001">0020|CONSERVATION/REGENERATION</option> 
  8.         <option value="0002">0020|COUNTRYSIDE SERVICE</option> 
  9.         <option value="0003">0020|DEVELOPMENT CONTROL</option> 
  10.         <option value="0004">0020|ENFORCEMENT</option> 
  11.         <option value="0005">0030|ADMINISTRATIVE SUPPORT</option> 
  12.         <option value="0006">0030|RESEARCH AND INFORMATION</option> 
  13.         <option value="0007">0030|POLICY</option> 
  14.         <option value="9998">0030|GENERAL (PLANNING)</option>
So as you can see, the 0010 appears before the Section Name. This is only a small cut down list of the sections, there are hundreds.

So I could do with some Javascript which limits the second dropdown.

Thanks in advance.
Jan 7 '09 #1
Share this Question
Share on Google+
5 Replies

Expert 100+
P: 213
you can have an object with all the sublists, e.g.:

Expand|Select|Wrap|Line Numbers
  1. var sections = {
  2.     'c0010': [
  3.         {code: '0001', desc:'0010|EMERGENCY PLANNING'},
  4.         {code: '0002', desc:'0020|HEALTH AND SAFETY'},
  5.         {code: '0002', desc:'0020|ETC...'}
  6.     ],
  7.     'c0020': [
  8.         {code: '0001', desc:'0010|WHATEVER'}
  9.     ]
  10. };
Of course, that json object can be made with php and retrieved from js with an ajax call. Then you use those values to populate the secon select (sections select) with the corresponding code. So, if the user chooses I.T. (code 0010) you need to get sections.c0010, that will get you an array that contains objects with two properties, code and desc, that you then use to fill the sections select.

Hope this helps.
Jan 7 '09 #2

P: 57
What you say makes sense, but what happens is that when the page loads up it drags in the list of Sections and Departments from an AS/400 server and creates two SELECT boxes, the first is the Department list (which is fairly straight fowd as it's just one long list with unique codes per Dept) but the section list which is created as the page loads contains all sections. So I need to avoid hardcoding in the seperate lists as they can and do change from time to time, more often than not I'm not kept in the loop so my form becomes out of date!!

Jan 7 '09 #3

Expert 100+
P: 213
That's why I told you can get the lists with an ajax call, the lists can be generated dynamically with data from the db (or make a cache script to reduce the load on the db), that way, you will always get the latest version.
Jan 7 '09 #4

P: 57
Here's what I got so far:

Expand|Select|Wrap|Line Numbers
  1. function TESTOptions(dept) {
  5. var selbox = document.Enrolment.Section;
  8. var SecList = document.getElementById('SECTEST').options;
  9. var match = false;
  11. if (!(dept.value == "")){
  12. for (i=0; i<SecList.length; i++){
  13.   if (SecList[i].value.split("|")[1] == dept){
  14.     match = true;
  15.     alert(SecList[i].value.split("|")[1]);
  16. }
  17. if (match){
  18.     var NewSecCode = (SecList[i].value.split("|")[0]);}
  19.     var NewSecDesc = (SecList[i].value.split("|")[2]);}
  20.     selbox.options[selbox.options.length] = new Option(NewSecCode + ' ' + NewSecDesc)
  21. }
  22. }
Which sort of works, it recognises the match in the DEPT code then message the DEPT code for the correct number of matching sections but it only adds one section to the selbox.options

Would rather this options then it's all self contained.
Jan 7 '09 #5

Expert Mod 15k+
P: 16,027
Rather than go this route, just load an empty select for the sections drop-down (or the initial matching options). Then onchange of the first drop-down, make an Ajax call which takes the selected option value and returns just the options required which replace the options in the sections drop-down.
Jan 9 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.