java - 使用 Ajax 和 JSP 进行多选的级联下拉列表

Question

我正在将多选下拉值发送到 JSP 页面。下面是发送多选值的 AJAX 代码。 JSP PAge 包括用于从数据库读取并在另一个下拉列表中显示其值的 SQL 查询。下面的代码仅显示基于选择而不是多选的级联下拉值。看起来只有一个值被发送到 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);
 }

Answer 1

我认为你应该改变获取多值的方式。有些事情是这样的:

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