473,322 Members | 1,408 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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

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.

Department:
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> 
Section:
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
5 6164
xNephilimx
213 Expert 100+
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. };
  11.  
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.
Regards
Jan 7 '09 #2
plumba
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!!

Regards
Jan 7 '09 #3
xNephilimx
213 Expert 100+
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
plumba
57
Here's what I got so far:

Expand|Select|Wrap|Line Numbers
  1. function TESTOptions(dept) {
  2.  
  3. //SCRIPT WHICH POPULATES THE SECTION BOX BASED ON DEPARTMENT - MANUAL UPDATES REQUIRED
  4.  
  5. var selbox = document.Enrolment.Section;
  6.  
  7.  
  8. var SecList = document.getElementById('SECTEST').options;
  9. var match = false;
  10.  
  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
acoder
16,027 Expert Mod 8TB
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

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

Similar topics

3
by: Jim Mitchell | last post by:
My Goal is to have a dropdown (DL2) filled from the selectIndexChange event of a primary dropdown (DL1). These are picklists that will be selected frequently. Can someone recommend a strategy...
5
by: SirPoonga | last post by:
I think I'd have to do a combination of ASP and javascript to do this. What I want to do fill the first drop down box with values from a database query. Then based off that selection fill in the...
2
by: Terry | last post by:
I have cerated a Form, ExamsFrm, which is used to input details of exams taken at several Centres. It dosplays details from StudentTbl and has a SubForm which displays details from ExamsTble. I...
0
by: Jeff | last post by:
After I bind the repeater control in the form_load event, it builds multiple lines based on the number of rows in the dataset. In the repeater control, I have a textbox and a dropdown list box. ...
1
by: Stanley | last post by:
Hello all, I have a custom collection that I am using to fill a DropDown list that I need to filter out items based on another dropdown list. My problem is the actual filter in the collection. I...
11
by: Bob | last post by:
I am in the process of upgrading an Access database to SQL Server (and climbing that learning curve!). The wizard happily upgraded all the tables and I can link to them OK using ODBC. The...
4
by: AccessRookie | last post by:
Ok, I am pretty new to Access (Using Access 2002 at my job). Here is what I want to do. I want to create a database that has a form. On this form will be a dropdown menu (combobox). Depending...
3
by: er1 | last post by:
Hi all, I have created a double dropdown list. Based on the first list selection, second list populates (this works fine). I have a submit button, which when clicked should run a select query...
0
by: Aishwarya | last post by:
Hello, I want to add a filter to an ultrawingrid such that the first column header displays a textbox in which the user can type the text and the filtering will occur based on the text...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.