根据另一个下拉列表中的选择填充一个下拉列表，然后重定向 [英] Populate one dropdown based on selection in another then redirect

问题描述

我正在尝试构建一个双层下拉菜单，其中第二个下拉列表填充第二个下拉菜单。我在网站上发现了很多例子，但是我希望我的菜单在第二个菜单被选中后重定向到一个页面，并且无法确定这一点。

I'm trying to build a two tier drop down menu where the second drop down populates the second. I've found a lot of examples on the site but I want my menu to redirect to a page after the second menu is selected and can't figure that bit out.

我对JS的速度不高，所以请耐心等待。

I'm not that up to speed with JS so please bear with me.

下面的代码是另一篇文章的例子：

The code below is an example from another post:

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
    var colours = new Array('Black', 'White', 'Blue');
    var shapes = new Array('Square', 'Circle', 'Triangle');
    var names = new Array('John', 'David', 'Sarah');

    switch (ddl1.value) {
        case 'Colours':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), colours[i], colours[i]);
            }
            break;
        case 'Shapes':
            document.getElementById(ddl2).options.length = 0; 
        for (i = 0; i < colours.length; i++) {
            createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
            }
            break;
        case 'Names':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), names[i], names[i]);
            }
            break;
            default:
                document.getElementById(ddl2).options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

然后称之为

<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
<select id="ddl2">
</select>

这一切都运行正常，但是我想让页面重定向到网站上的某个地方第二次下拉菜单中的选择。

This all works fine, but I want the page to redirect to somewhere on the site after the person makes a selection in the second drop down.

任何人都可以帮忙调整代码以实现这一目标吗？

Could anyone help with how to adapt the code to make that happen?

谢谢

推荐答案

我希望页面重定向到网站上的某个地方在第二个下拉列表中进行选择。

I want the page to redirect to somewhere on the site after the person makes a selection in the second drop down.

挂钩更改事件第二个< select> 元素，然后从那里提交表单：

Hook on the change event of the second <select> element, and then submit the form from there:

<select id="ddl2" onChange="redirect(this)">
</select>

function redirect(select) {
    // The simplest way: call submit on the form element the select belongs to:
    select.form.submit();
}

但您也可以在提交前动态更改表单的目标属性，或者只需离开。

But you could also change the target attribute of the form dynamically before submitting, or just navigate away.

更新：提交工作，你当然需要给你的选择一些名称属性，如：

Update: To make the submit work, you of course would need to give your selects some name attributes, like:

<form action="/router.php" method="GET">
    <select name="first" onchange="configureDropDownLists(this,'ddl2')">
        ...
    </select>
    <select name="second" id="ddl2" onChange="redirect(this)">
    </select>
</form>

---

虽然您的 configureDropDownLists 函数可能有效，您可以通过不使用switch语句来改进它，但是可以通过对象文字来改进它，如果在对象中找到了相同的东西，只需选择选项值数组：

---

Although your configureDropDownLists function may work, you might improve it by not using a switch statement, but an object literal, and just select the array of option values before executing the same thing if one was found in the object:

function configureDropDownLists(firstSelect, secondId) {
    var map = {
        "colours": ['Black', 'White', 'Blue'],
        "shapes": ['Square', 'Circle', 'Triangle'],
        "names": ['John', 'David', 'Sarah']
    };

    var value = firstSelect.value.toLowerCase();
    var optionsArr = map[value];

    var secondSelect = document.getElementById(secondId);
    secondSelect.options.length = 0; // remove all options
    if (optionsArr) {
         for (var i=0; i<optionsArr.length; i++) {
              createOption(secondSelect, optionsArr[i], optionsArr[i]);
         }
    }
}

这篇关于根据另一个下拉列表中的选择填充一个下拉列表，然后重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！