将值附加到下拉列表中

时间:2012-02-29 19:31:38

标签: javascript jquery ajax drop-down-menu multiple-select

我正在使用源代码进行多项选择

Dropdown check-list

因为,已经显示了静态值的示例,我已根据我的要求进行了编辑,并且我尝试使用数据库填充下拉列表的值,这意味着将值动态填充到下拉列表中。但是,我没有做到。请帮我。下拉列表将根据从第一个下拉列表中选择的选项填充

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

我的 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);
 %>

请帮助我!!

1 个答案:

答案 0 :(得分:0)

我认为这就是你要找的东西:

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

用此替换您的成功功能,并从div中取出select

如果您正在加载jQuery,为什么不使用它而不仅仅是ajax调用?

删除onmouseup,然后尝试:

$('#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();
            }
           });
});