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

dynamic drop down boxes..

P: 5
Hi,

am trying to create dynamic drop down boxes..
there are 3 drop down boxes.

The second drop down box elements are to be update based on the selection made in the first drop down box (selecting an element on the first drop down box calls a getData.jsp file which returns the result.)

the third drop down box elements are to be update based on the selection made in the second drop down box (selecting an element on the second drop down box calls a getData.jsp file which returns the result.)

Can you help me with this....?
Oct 14 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
I assume that you're going to use Ajax for this. What code do you have so far?
Oct 14 '07 #2

P: 5
I assume that you're going to use Ajax for this. What code do you have so far?

JavaScript part

Expand|Select|Wrap|Line Numbers
  1. var xmlHttp
  2. var hint_about
  3.  
  4. function setAbout(stri)
  5. {
  6. hint_about = stri;
  7. }
  8.  
  9. function getAbout()
  10. {
  11. return hint_about;
  12. }
  13.  
  14. function showHint(st, lin, about)
  15. {
  16. if (st.length==0)
  17.   { 
  18.   document.getElementById(about).innerHTML="";
  19.   return;
  20.   }
  21. xmlHttp=GetXmlHttpObject()
  22. if (xmlHttp==null)
  23.   {
  24.   alert ("Your browser does not support AJAX!");
  25.   return;
  26.   } 
  27. var url=lin;
  28. url=url+"?q="+st;
  29. url=url+"&sid="+Math.random();
  30. xmlHttp.onreadystatechange=stateChanged;
  31. xmlHttp.open("GET",url,true);
  32. xmlHttp.send(null);
  33.  
  34. function stateChanged() 
  35. if (xmlHttp.readyState==4)
  36. var temp = getAbout();
  37. document.getElementById(temp).innerHTML=xmlHttp.responseText;
  38. }
  39. }
  40.  
  41. function GetXmlHttpObject()
  42. {
  43. var xmlHttp=null;
  44. try
  45.   {
  46.   // Firefox, Opera 8.0+, Safari
  47.   xmlHttp=new XMLHttpRequest();
  48.   }
  49. catch (e)
  50.   {
  51.   // Internet Explorer
  52.   try
  53.     {
  54.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  55.     }
  56.   catch (e)
  57.     {
  58.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  59.     }
  60.   }
  61. return xmlHttp;
  62. }
  63.  
  64.  
  65. function elementExchange(eleID)
  66. {
  67. loadArray();
  68.  
  69. var i =0
  70. for(i=0;i<jsArray.length;i++)
  71. {
  72. var optn = document.createElement("OPTION");
  73. optn.value=jsArray[i]
  74. optn.text=jsArray[i]
  75. document.getElementById(eleID).options.add(optn)
  76. } // end of for
  77.  
  78. } // end of elementExchange()
  79.  
  80.  

Below is where it is supposed to be updated

Expand|Select|Wrap|Line Numbers
  1. <tr>
  2.                 <td align="center">
  3.  
  4.                     <select size="1" name="asset_type1" onclick="setAbout('temp_choice'); showHint(this.value, '/asset/jsps/ajaxGetMake.jsp'); elementExchange('make1');"><%out.print(opts);%></select></td>
  5.                 <td align="center"> 
  6.                     <select size="1" name="make1" onclick="showHint(this.value, '/asset/jsps/ajaxGetModel.jsp'); setAbout('model1');"></select></td>
  7.                 <td align="center"> 
  8.                     <select size="1" name="model1" onclick="showHint(this.value, '/asset/jsps/ajaxGetAssetTag.jsp'); setAbout('asset_tag1');"></select></td>
  9.                 <td align="center"><select size="1" name="asset_tag1" onclick="document.asset.asset_tag2.value = this.value;"></select></td>
  10.             </tr>
  11.  
  12.  
  13.  
  14. <form name="temp_form">
  15. <div id='temp_choice' style='display:none'></div>
  16. </form>
  17.  
Oct 18 '07 #3

acoder
Expert Mod 15k+
P: 16,027
If the response from the server-side returns the options as HTML, just use innerHTML to set the options. If not, parse the response to get the options andset them. Don't only use the add method with one parameter. That only works in IE. See this link.

Once you have one working, we'll worry about the third dropdown box.
Oct 18 '07 #4

Post your reply

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