如何根據在另一個下拉列表中選擇的值填充下拉列表？

我在JSP中定義了兩個下拉列表。第一個下拉菜單從數據庫中獲取其值。在選擇此下拉列表中的值時，應根據第一個下拉列表的選定值從數據庫中提取第二個下拉列表的相應值。我已經使用Javascript和jQuery來獲取第一個下拉列表的值。但是我無法弄清楚如何在JSP中引用這個值來填充第二個JSP。如何根據在另一個下拉列表中選擇的值填充下拉列表？

這是兩個下拉菜單我的JSP代碼：

第一個下拉列表：

<select name="dd1" id="dd1" style="width: 200px"> 
<option value="0">Choose New Salary</option> 
    <% 
    String Query1="select distinct Salary from TABLE1 where StartYear < 2005 order by Salary"; 
    Stmt1 = conn.createStatement(); 
    ResultSet List1=Stmt1.executeQuery(Query1); 

    while (List1.next()) 
    { 
     int val1=List1.getInt("SALARY"); 
    %> 

    <option value ="<%=val1%>"><%=val1%></option> 
    <%    
     } 
     %>

第二個下拉（我需要與第一個下拉的值來代替GETDD1DATA）：

<select id="dd2" style="width: 200px"> 
<option value="0">Choose New Position</option> 
<% 
String Query2="select distinct POSITION from TABLE1 where Salary=" + GETDD1DATA + " order by POSITION"; 
Stmt2 = conn.createStatement(); 
ResultSet List2=Stmt2.executeQuery(Query2); 
while (List2.next()) 
{ 
     int val2=List2.getInt("POSITION"); 
%> 

<option value ="<%=val2%>"><%=val2%></option> 
<%    
    } 
%>

這是JavaScript/jQuery代碼獲取第一個下拉的數據（我能看到第一個下拉的值是正確保存在變量selectedValue1）：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#dd1").change(function(){ 
     var selectedValue1 = $(this).val(); 
     //console.log(selectedValue1); 
}); 
}); 
</script>

我需要傳遞的價值從Javascript到JSP的selectedValue1，並在變量GETDD1DATA中引用它。我探索了會話變量和隱藏元素來存儲dropdown1值。但是這些不起作用，因爲當腳本變量尚未在Javascript中聲明時，Java腳本只會在頁面加載中執行一次。我也認爲重新加載整個頁面不會是一個選項，因爲下拉列表將被重置爲默認值。請幫我解決我的問題。

來源

2014-01-29 varun kumhar

在點擊一個選項加載的值第二選擇，其中你有價值嗎？ –

我將使用從查詢的第一個下拉列表中選擇的值來獲取第二個下拉列表的值。但我無法弄清楚如何在運行時引用JSP中的第一個下拉列表的值。 –

您未使用JavaScript代碼填充第一個下拉列表。您可以使用JavaScript代碼來捕獲在第一個下拉列表中選擇內容的事件。

此外，您無法將值從JavaScript傳遞給JSP。 Javascript可以與JSP頁面產生的HTML進行交互。

您似乎對服務器端語言（在這種情況下爲JSP）所做的工作以及工作方式沒有明確的概念。我建議你閱讀http://www.javaworld.com/article/2076557/java-web-development/understanding-javaserver-pages-model-2-architecture.html。

所以你可以用兩種方式填寫第二個表單：做一個回傳到服務器，傳遞選定的值作爲參數，並使用java或jsp來填充第二個下拉列表。這將導致每次在第一個下拉列表中選擇另一個項目時刷新整個頁面。

第二個選項（更好）是使用ajax。這包括兩部分。服務器：公開基於參數（從dd1選擇的值）的webserivce將檢索dd2的值。客戶端：您已經在javascript中擁有事件捕獲代碼。從javascript調用web服務與dd1中的選定值。解析結果並使用javascript將它們放入dd2。

爲了更好地理解查找服務器端腳本，回傳和AJAX（後者不需要回發，並保持你的頁面響應，這是要走的路）

來源

2014-01-29 17:45:14 ruben056

請

var x; 

$('#pu-country').on('change', function() { 
    if (this.value != '0') { 

     $('#pu-city').prop('disabled', false); 
     $('#pu-city').find("option").not(":first").remove(); 
     $('#pu-location').prop('disabled', true); 
     $('#pu-location').val("Choose"); 

     switch (this.value) { 
      case 'A': 
       x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>' 
     } 
     $('#pu-city').append(x) 
    } else { 
     $('#pu-location').prop('disabled', true); 
     $('#pu-location').val("Choose"); 
     $('#pu-city').prop('disabled', true); 
     $('#pu-city').val("Choose"); 
    } 


}); 

$('#pu-city').on('change', function() { 
    if (this.value != '0') { 

     $('#pu-location').prop('disabled', false); 
     $('#pu-location').find("option").not(":first").remove(); 

     switch (this.value) { 
      case 'A.1': 
       x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>' 
       break; 
      case 'A.2': 
       x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>' 
       break; 
      case 'A.3': 
       x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>' 
       break; 

     } 

     $('#pu-location').append(x) 
    } else { 
     $('#pu-location').prop('disabled', true); 
     $('#pu-location').val("Choose"); 
    } 


});

如果嘗試要檢查演示，那麼請嘗試此處

Fiddler

來源

2014-05-02 05:20:52 cracker

如何根據在另一個下拉列表中選擇的值填充下拉列表？

回答

相關問題