append value into dropdown-list

Question

i'm using the source code for multiple selection

Dropdown check-list

Since, the example has been shown for the static values, i have edited as per my requirement, And i was trying to populate the values of the dropdown list using database, which means dynamically populating the values into the dropdown-list. But, i'm failed to do. Please help me. The dropdown list will be populated as per the option selected from the first dropdown

<select id="design" onmouseup="showOfficer()" >
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 <option value="D">D</option>
 <option value="E">E</option>
 </select>

<select id="officers" class="officers" multiple="multiple"><div id="show_officer"></div></select>

my javascript

<script language="javascript" >
function showOfficer(){
                        document.getElementById("msg4").style.display="block";
                       $.ajax({
                            url: 'getValues.jsp',
                            data: 'design_id='+ $('#design').val(),
                            type: 'post',
                            success: function(msg){document.getElementById("show_officer").innerHTML=msg;
                                document.getElementById("msg4").style.display="none";
                            }});
                    }
</script>

getValues.jsp

<%@include file="../dbconfig.jsp" %><%
String design=request.getParameter("design_id");
 String buffer="";
 try{
     int count=0;
 ResultSet rs = state.executeQuery("SELECT OFFICER_ID,FIRST_NAME,LAST_NAME FROM OFFICER WHERE STATUS_TYPE='UNASSIGN' AND DESIGN_ID='"+design+"'");//
   while(rs.next()){
   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(2)+" "+rs.getString(1)+"</option>";
   count++;
   }
 if(count==0)
     {
  buffer=buffer+"<option value='ERROR'>OFFICERS ASSIGNED ALREADY</option>";
 }
 }
 catch(Exception e){
    buffer=buffer+"<option value='ERROR'>OFFICERS ASSIGNED ALREADY</option>"+e;
 }
 buffer=buffer+"";
 //out.print(buffer);
 response.getWriter().print(buffer);
 %>

Please help me !!

Answer 1

I think this is what you're looking for:

success: function(html){
    $("#msg4").hide();
    $("#officers").html(html);
    $("#officers").dropdownchecklist();
}

replace your success function with this and take that div out of your select.

If you're loading jQuery why don't you use it for more than just the ajax call?

remove the onmouseup, and try this:

$('#design').mouseup(function(){
    $("msg4").show();
    $.ajax({
            url: 'getValues.jsp',
            data: 'design_id='+ $('#design').val(),
            type: 'post',
            success: function(html){
                $("#msg4").hide();
                $("#officers").dropdownchecklist("destroy");
                $("#officers").html(html);
                $("#officers").dropdownchecklist();
            }
           });
});