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

Question

我有以下代码。如何将选定的值传递给另一个脚本？我尝试执行“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>