根据另一个下拉列表中的选择填充一个下拉列表，然后重定向

Posted 2023-02-22

【中文标题】根据另一个下拉列表中的选择填充一个下拉列表，然后重定向

【英文标题】：Populate one dropdown based on selection in another then redirect

【发布时间】：2012-08-02 19:06:17

【问题描述】：

我正在尝试构建一个两层下拉菜单，其中第二个下拉菜单填充第二个。我在网站上找到了很多示例，但我希望我的菜单在选择第二个菜单后重定向到一个页面，并且无法弄清楚这一点。

我对 JS 不太了解，所以请多多包涵。

以下代码是另一篇文章的示例：

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

这一切都很好，但我希望页面在该人在第二个下拉列表中做出选择后重定向到网站上的某个位置。

谁能帮助我们修改代码以实现这一目标？

谢谢

【参考方案1】：

我希望在用户在第二个下拉菜单中做出选择后，页面重定向到网站上的某个位置。

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

<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();

但您也可以在提交之前动态更改表单的目标属性，或者只是navigate away。

更新：要使提交工作，您当然需要为您的选择提供一些name 属性，例如：

<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 语句，而是使用对象字面量来改进它，如果在对象中找到选项值，则只需在执行相同操作之前选择选项值数组：

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]);
         
    

【讨论】：

谢谢。如果我希望它为每个第二个下拉选项重定向到不同的页面，这是否也有效，即如果选择的第二个选项是蓝色的，那么它会重定向到关于蓝色事物的页面，如果他们选择了白色，那么它会重定向到关于白色的东西？

是的，为什么不呢？在我刚刚添加的示例表单中，它将导航到 /router.php?first=Colours&second=White - 您决定该页面包含的内容。

酷。谢谢，抱歉错过了你的更新。非常感谢您的帮助，现在可以玩一下。