使用Ajax和JSP使用Multiselect级联下拉列表

时间:2012-11-05 20:46:14

标签: java ajax jsp jquery

我将多选下拉值发送到JSP PAGE。下面是发送多选值的AJAX代码。 JSP PAge包括用于从数据库读取的SQL查询,并在另一个下拉列表中显示其值。下面的代码只显示基于select而不是multiselect的级联下拉值。似乎只有一个值发送到apps.jsp而不是所有值。我尝试了一些改变但它没有用。以下是我可以使用的最佳工作代码。任何帮助从第一个下拉列表中获得基于多选的第二个下拉显示值?单个下拉列表可以正常使用以下代码。谢谢。

<select multiple="multiple" name="RequirementFor" id="RequirementFor" onchange="showState(this.value);">

 <option value="1">Test1</option>
    <option value="2">Test2</option>
<option value="3">Test3</option>
<option value="4">Test4</option>
</select>
<div id="plat"><select name="Platform" id="Platform"  multiple="multiple"     onchange='showState2(this.value)'>

    </select></div>
//AJAX Code
var xmlHttp ; 
var xmlHttp;
function showState(str){

if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request");
return;
} 
var url="apps.jsp";
url +="?value=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

function stateChange(){   
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
document.getElementById("plat").innerHTML=xmlHttp.responseText   ;
}
}

下面是JSP查询(apps.jsp)页面的代码。

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost", "username", "password"); 
Statement stmt;
ResultSet rs;
String[] funID=  request.getParameterValues("value");  
String conCat = "";
try{
if(funID.length>0)
{
for(int i=0;i<funID.length; i++)
{
    conCat =    funID[i] +" "+ "OR" + " "+ "FU_DEPARTMENT_ID= " + conCat;
} 
conCat = conCat.substring(0, conCat.length() - 22);
}
}
 catch(Exception e)
 {out.println(e);}

 String buffer="<select name='state' multiple='multiple'><option value='-1'>Select</option>";


 try
 {

        String sqlSelect1="Select FU_ID, FU_NAME from UNIT where FU_DEPARTMENT_ID ="+conCat+" ORDER BY FU_NAME ASC";

  stmt = con.createStatement();  
 rs = stmt.executeQuery(sqlSelect1);  
   while(rs.next()){
   buffer=buffer+"<option value='"+rs.getString("FU_ID")+"'>"+rs.getString("FU_NAME")+"</option>";  
   }  
 buffer=buffer+"</select>";  
 response.getWriter().println(buffer); 
 stmt.close();
 rs.close();
 con.close();
 }
 catch(Exception e){
     System.out.println(e);
 }

1 个答案:

答案 0 :(得分:0)

我认为你应该改变获得多值的方式。有些事情喜欢这个:

    <select multiple="multiple" name="RequirementFor" id="RequirementFor" onchange='getMultiple(this);'>
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
    <option value="4">Test4</option>
</select>

<script>
    var selected; 
    function getMultiple(ob) { 
        selected = new Array();
        for (var i = 0; i < ob.options.length; i++) {
            if (ob.options[ i ].selected) {
                selected.push(ob.options[ i ].value);
            }
        }
        var str = "";
    for (var i = 0; i < selected.length; i++) {
        str += "&value=" + selected[i];
    }
    console.log(str);

            // --> your ajax code

    }

</script>