Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Dynamic related combo boxes in table cells

Newbie
  
Join Date: Feb 2007
Posts: 4
#1: Feb 19 '07
I am developing a web page for order processing using Spring MVC.
In my JSP I have a table populated from the list of orders that are passed in the model (form backing object). Some fields there are filled and some are not.
User is suppose to complete mandatory fields and submit the form further.
I have it almost done except one thing where I can use some help.
One <td> contains 2 related combo boxes for shipping service selection:
First combo box contains options for carrier selection:USPS, FedEx, UPS, etc.
Second one should be populated with the type of service offered by the respective carrier: USPS - Express Mail, Priority Mail, Parcel Post; FedEx - Priority Overnight, Overnight, ..., Home Delivery, etc.
I found on the web a solution with the Javascript function that is called onChange event on the first combo box and generates options for the second.
My problem is that I have these two combo boxes in a table cell for several dozens of rows and I am not sure how can I address them properly.
I am specializing on the back end Java development but right now I need to deliver a complete web application. My front end skills are quite limited.
Help me please.
iam_clint's Avatar
Forum Leader
  
Join Date: Jul 2006
Location: Oklahoma
Posts: 1,076
#2: Feb 19 '07

re: Dynamic related combo boxes in table cells

To address the combo boxes you need to give them an ID
Example
[HTML]
<select id="shipping" onchange="setOptions(this.value);"><option value="blank">Select Shipping Type</option><option value="0">UPS<option value="1">FedEx</select>
[/HTML]

This will give this combo box an ID -- The second select box could be something like
[HTML]
<select id="service"></select>
[/HTML]

your javascript would then call upon these like this
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function setOptions(val) {
  3. var opt = document.getElementById("service")
  4. if (val == 0) {
  5. //this is if they selected ups
  6. clearlist();
  7. opt.options[0] = new Option('Express Mail','Express');
  8. opt.options[1] = new Option('Priority Mail','Priority');
  9. opt.options[2] = new Option('Parcel Post','Parcel');
  10. opt.options[3] = new Option('Priority Overnight','Overnight');
  11. //So on
  12. alert('The brown guys');
  13. }
  14. if (val == 1) {
  15. clearlist();
  16. //this is if they selected fedex
  17. opt.options[0] = new Option('Fedex1','Fedex1');
  18. opt.options[1] = new Option('Fedex2','Fedex2');
  19. alert('Fedex');
  20. }
  21. }
  22.  
  23. function clearlist() {
  24. var opt = document.getElementById("service").options;
  25. opt.length = 0;
  26. }
  27.  
  28. </script>
  29.  
please post with anything you don't understand about this so i can give you a further explanation.

don't forget in a form you need to name your select boxes so your serverside code can request it.


And welcome to thescripts!
Newbie
  
Join Date: Feb 2007
Posts: 4
#3: Feb 26 '07

re: Dynamic related combo boxes in table cells

Thank you,
I understand everything but unfortunately my case is little bit more complicated.
I wrote JSP that generates the javascript based on what you suggested but it involves a hash array of lists of objects, but cannot make it work. Here is the generated page source:
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2.     var optmap = new Array();
  3.  
  4.         optmap["1"] = [
  5.  
  6.              new serviceOption("1", "FedEx First Overnight"),
  7.  
  8.              new serviceOption("2", "FedEx Priority Overnight"),
  9.  
  10.              new serviceOption("3", "FedEx Standard Overnight"),
  11.  
  12.              new serviceOption("4", "FedEx 2 Days"),
  13.  
  14.              new serviceOption("5", "FedEx Express Saver"),
  15.  
  16.              new serviceOption("6", "FedEx Home Delivery")
  17.              ];
  18.  
  19.         optmap["2"] = [
  20.  
  21.              new serviceOption("1", "UPS Next Day Air Early AM"),
  22.  
  23.              new serviceOption("2", "UPS Next Day Air"),
  24.  
  25.              new serviceOption("3", "UPS Next Day Air Saver"),
  26.  
  27.              new serviceOption("4", "UPS Second Day Air AM"),
  28.  
  29.              new serviceOption("5", "UPS Second Day Air"),
  30.  
  31.              new serviceOption("6", "UPS 3 Day Select")
  32.              ];
  33.  
  34.         optmap["3"] = [
  35.  
  36.              new serviceOption("2", "USPS Express Mail"),
  37.  
  38.              new serviceOption("4", "USPS Priority Mail"),
  39.  
  40.              new serviceOption("6", "USPS Parcel Post")
  41.              ];
  42.  
  43.         optmap["4"] = [
  44.  
  45.              new serviceOption("1", "DHL Next Day AM"),
  46.  
  47.              new serviceOption("2", "DHL Next Day Noon"),
  48.  
  49.              new serviceOption("3", "DHL Next Day 3 PM"),
  50.  
  51.              new serviceOption("4", "DHL Second Day"),
  52.  
  53.              new serviceOption("5", "DHL Ground"),
  54.  
  55.              new serviceOption("6", "DHL @ Home")
  56.              ];
  57.  
  58.     function serviceOption(priority, name)
  59.     {
  60.         this.priority = priority;
  61.         this.name = name;
  62.     }
  63.  
  64.     function refill(p, x)
  65.     {
  66.          document.write("came in with p = " + p + " and x = " + x);
  67.         var temp = document.getElementById(p);
  68.         clearopts(p);
  69.         var opts = optmap[x];
  70.         document.write(opts);
  71.         for(var i = 0; i < opts.length; i++)
  72.         {
  73.             var opt = opts[i];
  74.             temp.option[i] = new Option(opt.priority, opt.name);
  75.         }
  76.     }
  77.  
  78.     function clearopts(p)
  79.     {
  80.         var o = document.getElementById(p).options;
  81.         o.length = 0;
  82.     }
  83.  
  84. </script>
and here is the call:
Expand|Select|Wrap|Line Numbers
  1.                            <td>
  2.  
  3.                                 <select name="" 
  4.                                         onchange="refill('service_10088',this.value)">
  5.  
  6.                                         <option value="1">
  7.                                             FedEx
  8.                                         </option>
  9.  
  10.                                         <option value="2">
  11.                                             UPS
  12.                                         </option>
  13.  
  14.                                         <option value="3">
  15.                                             USPS
  16.                                         </option>
  17.  
  18.  
  19.                                         <option value="4">
  20.                                             DHL
  21.                                         </option>
  22.  
  23.                                 </select><select id="service_10088"></select>
  24.                                     <!-- this should be populated dynamicaly -->                               
  25.                             </td>
  26.  
Function refill get called with correct parameter values but variable opts inside the function is undefined and has no properties. The call to clearopts function occurs but errors out at this line:
Expand|Select|Wrap|Line Numbers
  1.        var o = document.getElementById(p).options;
Error console says that
Expand|Select|Wrap|Line Numbers
  1. Error: document.getElementById(p) has no properties
  2. Source File: http://localhost:8084/operations/operations.do
  3. Line: 3173
Can you please point out what is wrong with the code and how can I fix it?
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Feb 27 '07

re: Dynamic related combo boxes in table cells

Your serviceOption function doesn't actually create the options. What's priority? Also, what is the this object that you are setting the name and priority for?

See this page for creating/manipulating options.
Newbie
  
Join Date: Feb 2007
Posts: 4
#5: Feb 27 '07

re: Dynamic related combo boxes in table cells

Quote:

Originally Posted by acoder

Your serviceOption function doesn't actually create the options. What's priority? Also, what is the this object that you are setting the name and priority for?

See this page for creating/manipulating options.

Why it does not create the object? I followed the book for using constructors.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Feb 27 '07

re: Dynamic related combo boxes in table cells

Quote:

Originally Posted by GaryGreenberg

Why it does not create the object? I followed the book for using constructors.

OK, I had a closer look at your code and it does create options but in the refill function. serviceOptions is, of course, an object.

Ok, I've pinpointed the error. Use the following code for your refill function:
Expand|Select|Wrap|Line Numbers
  1. function refill(p, x)
  2. {
  3.     alert("came in with p = " + p + " and x = " + x);
  4.     var temp = document.getElementById(p);
  5.     clearopts(p);
  6.     var opts = optmap[x];
  7.     alert(opts);
  8.     for(var i = 0; i < opts.length; i++)
  9.     {
  10.        var opt = opts[i];
  11.        temp.options[i] = new Option(opt.priority, opt.name);
  12.     }
  13. }
  14.  
I've changed the document.write()s to alerts. The main problem with your code was temp.option should have been temp.options
Newbie
  
Join Date: Feb 2007
Posts: 4
#7: Mar 6 '07

re: Dynamic related combo boxes in table cells

I got it working, thank you for your help. Main problem was not in the script but in the configuration file for the JSP. JSP has been rendered twice. first time normally and second time without params, therefore, obliterating the array created in the first run.
Reply

« previous question | next question »

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,327 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved