add values in select option using ajax and servlet

Hi

I want to add values in select option depends of select values of other select option.

Front view I am using jsp and backend servlet

<html>
<head>
     
     <script type="text/javascript">
		function showStartDate(str){
			var xmlhttp;    
			if (str=="")			  {
			  	document.getElementById("txtHint").innerHTML="";
			  	return;
			 }
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			  	xmlhttp=new XMLHttpRequest();
			}else  {// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)			    {
			    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
			    }
			  };
		xmlhttp.open("GET","Info?program="+str,true);
		xmlhttp.send();
		}
</script></script>

</head>

<body>
     			<html:select property="program" onchange="showStartDate(this.value)">
                                                 <html:option value="program1">program1</html:option>
                                                 <html:option value="program2">program2</html:option>
                                                 <html:option value="program3">program3</html:option>
                                                 <html:option value="program4">program4</html:option>

</html:select>

<html:select property="start_date"></html:select>

Start Date : <div id="txtHint">Customer info will be listed here...</div>
<body>

</html>

I can able to display values in textHint but I want to add these values in start_date select option.

Can anyone help me?

Thanks

Vaishali

Hello,
Give the "id" for start date and access it within your Javascript that fetches the values using Ajax. Once you get access to the drop down you can add values to it.
You should use Java script framework such as jQuery and its API documentation will help you to do this.

Regards,
Amit

You can not set the innerHTML of a select element in IE.

Easiest solution is to use jQuery since it handles it for you.

BUT if you can not use that library, I wrote a little function that tries to set the innerHTML. If setting the innerHTML results in no options being added, it rewrites the function so it will create an element and clone its options.

Running Example: http://jsbin.com/uqera4/

Eric>

thanks Eric, but still its not working

I changed code

document.getElementById("txtHint").innerHTML=dateArray;
line instead of arrays i am getting output as [object]
I am very new in ajax, javascript.

Can anyone help me?

Thanks

Vaishali