title: To fill a dropdown from servelet using ajax
body: <p>I need to fill a drop down from database using ajax, Iam using two drop downs, if first drop down value is selected the second drop down value(have to be retrieved from DB based on the values selected in the first drop down) must have to be displayed. The DAO(Data Access Layer) returns 4 results as arraylist object but in http responsetext it is printing as object not the values.I tried using for loop to iterate it but i can't achieve it.  Please assist me on this.</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>    // First Drop Down
      Question Field :&lt;select name="ddlAddQuestionField" id='ddlAddQuestionField' onchange="getFieldPosition()"&gt;
          &lt;option value=''&gt;Select Question Field&lt;/option&gt;
          &lt;option value='Security Question'&gt;Security Question&lt;/option&gt;
          &lt;option value='Personal Info'&gt;Personal Info&lt;/option&gt;
      &lt;/select&gt;
  
      // Second DropDown
  
      User Field Position:&lt;select name="userFieldPosition" id="userFieldPosition" disabled="disabled"&gt; &lt;/select&gt;
  </code></pre>
  
  <p><strong>Javascript Code</strong></p>
  
  <pre><code>function getFieldPosition(){
  
                      var fieldName =$("#ddlAddQuestionField").val();
  
                      if(window.XMLHttpRequest){
                          xmlhttp=new XMLHttpRequest();
                      } else {
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange=function() {
  
                          if(xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
  
                              document.getElementById("userFieldPosition").disabled=false;                            
                              alert(xmlhttp.responseText);
                              var response =xmlhttp.responseText;
  
                              for(var i=0;i&lt;response.length;i++) {
                                  var elements = "&lt;option value='"+response[i]+"'&gt;"+response[i]+"&lt;/option&gt;";
                                  $("#userFieldPosition").append(elements);
                              }
                          }
                        }
                          xmlhttp.open("POST","ApplicationController",true);
                          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                          xmlhttp.send("fieldAction=fieldPosition&amp;fieldName="+fieldName);
                  }
  </code></pre>
  
  <p><strong>Servelet Code</strong></p>
  
  <pre><code>fieldPositionObj = fieldPositionDaoObj.getFieldPosition(fieldName);   //Hitting the Dao
  
                // In dao it returns arraylist object.     
  
              response.setContentType("text/plain");  
                  response.setCharacterEncoding("UTF-8"); 
                  response.getWriter().write(fieldPositionDaoObj);
  </code></pre>