Question

我有3个下拉菜单。并且所有3个都是相互关联的。即，如果我选择第一个下拉列表的值，取决于第二个下拉列表应显示值。根据第二个下拉列表的选择，第三个下拉列表应该填充值。已经完成了第1和第2。但取决于第二次下拉的值，我无法填充第三次下拉的值。任何人都可以帮助我。我知道这样的事情将在JFIDDLE.com。但是无法确切地搜索确切的名称！

Answer 1

好吧，这里有一些东西让你入门：

<form name='cars'>
<select name='brand'></select>
<select name='model'></select>
</form>

和javascript（我正在使用jQuery）：

var application_model = [
    {
    name: "General motors",
    models: [
        "model1", "model2", "model3"
        ]},
{
    name: "Mercedes",
    models: [
        "model4", "model5", "model6"
        ]},
{
    name: "Fiat",
    models: [
        "model7", "model8", "model9"
        ]}
];

var selectedBrandIndex = 0
var selectedModelIndex = 0

function render() {
    // render the first combo
    $('select[name=brand]').empty();
    $.each(application_model, function(index, object) {
        var selected = "";
        if (index == selectedBrandIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=brand]').append("<option value='" + index + "'   " + selected + ">" + object.name + "</option>");
    })

    // render the second combo
    $('select[name=model]').empty();
    $.each(application_model[selectedBrandIndex].models, function(index, object) {
        var selected = "";
        if (index == selectedModelIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=model]').append("<option value='" + index + "'   " + selected + ">" + object + "</option>");
    });
}

function main() {
    $("select[name=brand]").bind("change", function(event) {
        console.log(event.currentTarget.value);
        selectedBrandIndex = event.currentTarget.value;
        render();
    });
    render();
}

main();

检查小提琴：

http://jsfiddle.net/camus/MAgza/2/

欢呼声

Answer 2

如果你愿意，你必须使用AJAX。这很容易。

<select name="ID"
                    id="ID"
                    onchange="DoYourTaskHere(this);">
                        <option value="select" selected="selected">Select</option>
                        <c:forEach items="${A.List}" var="Variable">
                            <option value="${ID}">
                                <c:out value="${ID}" />
                            </option>
                        </c:forEach>
                </select>

在脚本中，您可以按如下方式编写代码。

function loadValue(ID) {
    if (ID.value != "select") {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
                                    // Safari
            ValueXmlHttpReq = new XMLHttpRequest();
        } else {// code for IE6, IE5
            ValueXmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        ValueXmlHttpReq.onreadystatechange = processLoadValues;
        ValueXmlHttpReq.open("POST", "getValue.htm?ID="
                + ID.value, true);
        ValueXmlHttpReq.send();
    } else {
        var objSelect = document.getElementById("ValueId");
        var currentValueListLength = objSelect.options.length;
        while (currentValueListLength > 0) {
            objSelect.remove(1);
            currentValueListLength--;
        }

        var objSelect = document.getElementById("2ndDropDownWhereYouWantToPopulate");
        var currentSecondValueListLength = objSelect.options.length;
        while (currentSecondValueListLength > 0) {
            objSelect.remove(1);
            currentSecondValueListLength--;
        }
    }
}

Answer 3

你可以尝试相关的组合框

您可以在一个页面上轻松设置任意数量的组合框实例。他们可以根据某些客户端或服务器端事件相互交互。

此示例显示组合框如何使用客户端方法相互交互并按需请求项目。要在客户端按需请求项目，请使用requestItems（）方法。

依赖组合框的ViewState被禁用，因为在此示例中正确操作所需的数据是在其ClientState中维护的。

参考http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

DropDown菜单更改OnChange

3 个答案: