使用javascript在combobox中追加/填充值

时间:2012-02-29 17:51:32

标签: javascript jquery ajax select

当用户从第一个组合框中选择值时,将选项附加到另一个组合框中。需要帮助.. !!

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

AJAX代码

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

list_assign_officer.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)

您可以查看以下代码:

<select id="design" onChange="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>
<div id="msg4"></div>


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

http://jsfiddle.net/YvyWc/18/