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

Dynamic related combo boxes in table cells

P: 4
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.
Feb 19 '07 #1
Share this Question
Share on Google+
6 Replies

iam_clint
Expert 100+
P: 1,208
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!
Feb 19 '07 #2

P: 4
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?
Feb 26 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Feb 27 '07 #4

P: 4
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.
Feb 27 '07 #5

acoder
Expert Mod 15k+
P: 16,027
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
Feb 27 '07 #6

P: 4
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.
Mar 6 '07 #7

Post your reply

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