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

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>