繁体   English   中英

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

[英]Pass selected dropdown list into second dropdown list

我有下面的代码。 如何将选定的值传递给另一个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>

您或者需要实现某种方式来将选定的值发送回服务器以获取其他选项的列表,或者可以将对象嵌入到网页上的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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM