将选定的下拉列表传递到第二个下拉列表

Question

我有以下代码。如何将 selected 值传递给另一个 scriptlet？我试过 "getAttribute"，但没用。所以下面的代码列出了汽车类型我 select 一个值，但不知道如何将 selected 值传递给第二个下拉列表根据 selected 值进一步填充的列表。

第一个下拉列表：

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

将上面的 selected 值传递到下面的函数中：

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

将选定的下拉列表传递到第二个下拉列表

Pass selected dropdown list into second dropdown list

javascript

java

jsp

scriptlet