將選定的下拉列表傳遞到第二個下拉列表中

Question

我有以下代碼。我如何將選定的值傳遞給另一個scriptlet？ 我試着做「getAttribute」，但它沒有奏效。因此，下面的代碼列出了汽車類型 ，我選擇了一個值但不知道如何將選定值傳遞給第二個下拉列表 列表，該列表根據所選值進一步填充。

第一個下拉列表：

<div class="cell"> 
    Select Car_Type 
    <div class="input-control"> 
     <select id="carid" name="carid"> 
     <option selected disabled>--SELECT CAR TYPE--</option> 
     <% 
     ArrayList<Integer> carList = CarListDAO.getCar(id); 
     for (int c: carList){ 
      out.println("<option value='" + c + "'>" + c + "</option>"); 
       request.setAttribute("c", c); 
     } 

     %> 
     </select> 

    </div> 
</div> 

通選擇的值從上面到下面的功能：

<div class="cell"> 
    Select Car_Engine 
    <div class="input-control"> 
     <select id="carENGINE" name="carENGINE"> 
     <option selected disabled>--SELECT CAR Engine--</option> 
     <% 
     ArrayList<String> carEngine = CarListDAO.getCarEngine(SELECTED_VALUE_FIRST_DROPDOWN); <----selected value from first dropdown passed to this method 
     for (String y: carEngine){ 
      out.println("<option value='" + y + "'>" + y + "</option>"); 
       request.setAttribute("y", y); 
     } 

     %> 
     </select> 

    </div> 
</div> 

Answer 1

你要麼需要實現一些方法來選定值發送回服務器以獲取列表的其他選項，或者您可以在您的網頁中將對象嵌入JSON中，並使用客戶端上的JavaScript更改選項：

<% 
Map<int, ArrayList<String>> engines = new Map<int, ArrayList<String>>(); 
ArrayList<Integer> carList = CarListDAO.getCar(id); 
for (int c: carList){ 
    ArrayList<String> carEngine = CarListDAO.getCarEngine(c); 
    engines.put(c, carEngine); 
} 
%> 
<script> 
var engines = <%out.println(JSONObject.valueToString(engines));%>; 
function showEngines() { 
    var el= document.getElementById('carid'); 
    for(var i=0;i<el.options.length;i++) { 
     if (el.options[i].selected) { 
      bindEngines(el.options[i].value); 
      break; 
     }  
    } 
} 
function bindEngines(c) { 
    var el=document.getElementById('carENGINE'); 
    el.options.length = 0; 
    var newOptions= engines[c]; 
    for (i=0; i<newOptions.length; i++) 
    { 
     el.options[el.length] = new Option(newOptions[i], newOptions[i]); 
    } 
} 
</script> 

<div class="cell"> 
    Select Car_Type 
    <div class="input-control"> 
     <select id="carid" name="carid" change="showEngines()"> 
     <option selected disabled>--SELECT CAR TYPE--</option> 
     <% 
     for (int c: carList){ 
      out.println("<option value='" + c + "'>" + c + "</option>"); 
     } 

     %> 
     </select> 

    </div> 
</div> 


<div class="cell"> 
    Select Car_Engine 
    <div class="input-control"> 
     <select id="carENGINE" name="carENGINE" disabled> 
     <option selected disabled>--SELECT CAR Engine--</option> 
     </select> 

    </div> 
</div>