dynamic drop down boxes..

[amcoldspy]

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....?

[acoder]

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

[amcoldspy]

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

JavaScript part

var xmlHttp
var hint_about
 
function setAbout(stri)
{
hint_about = stri;
}
 
function getAbout()
{
return hint_about;
}
 
function showHint(st, lin, about)
{
if (st.length==0)
  { 
  document.getElementById(about).innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url=lin;
url=url+"?q="+st;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
var temp = getAbout();
document.getElementById(temp).innerHTML=xmlHttp.responseText;
}
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
 
 
function elementExchange(eleID)
{
loadArray();
 
var i =0
for(i=0;i<jsArray.length;i++)
{
var optn = document.createElement("OPTION");
optn.value=jsArray[i]
optn.text=jsArray[i]
document.getElementById(eleID).options.add(optn)
} // end of for
 
} // end of elementExchange()
 
 

Below is where it is supposed to be updated

<tr>
                <td align="center">
 
                    <select size="1" name="asset_type1" onclick="setAbout('temp_choice'); showHint(this.value, '/asset/jsps/ajaxGetMake.jsp'); elementExchange('make1');"><%out.print(opts);%></select></td>
                <td align="center"> 
                    <select size="1" name="make1" onclick="showHint(this.value, '/asset/jsps/ajaxGetModel.jsp'); setAbout('model1');"></select></td>
                <td align="center"> 
                    <select size="1" name="model1" onclick="showHint(this.value, '/asset/jsps/ajaxGetAssetTag.jsp'); setAbout('asset_tag1');"></select></td>
                <td align="center"><select size="1" name="asset_tag1" onclick="document.asset.asset_tag2.value = this.value;"></select></td>
            </tr>
 
 
 
<form name="temp_form">
<div id='temp_choice' style='display:none'></div>
</form>
 

[acoder]

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.