使用Ajax和JSP的Multiselect級聯下拉列表

Question

我正在向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); 
} 

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>