Question

我的网站是用ASP经典创建的 - VBScript（不是我选择的，是一种我以前没有经验的语言）。我正在尝试创建一个网页：下拉菜单根据第一个选择的内容显示其他下拉菜单。我正在尝试使用javascript函数来实现这一目标。

示例：

在第一个下拉菜单中，用户选择冰淇淋或薯片。根据用户选择的另一个下拉菜单，可以选择风味。

冰淇淋：香草，巧克力，薄荷薯片：准备好盐渍，奶酪和洋葱，盐和醋。

这就是我的代码目前的样子：

HTML

<select id="food" onchange="fctCheck(this.value)">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

。

的javascript

function fctCheck(food)
    {
    if (food == "")
        {document.getElementById(food).style.display = "none";}
    else
        {document.getElementById(food).style.display = "block";}
    }

Answer 1

st3inn this.value提到的

绝对没问题 - 只有document.getElement==>B<==yId的拼写错误。

但是你的代码有缺点，用户可以选择这两个选项，因此两个子选择都是可见的。

您可以先显示隐藏所有子选项，然后再显示选定项目的子选项。这可以通过这种方式完成（通过addiotional name-attribute，或者，如果您选择使用jQuery你可以做更复杂的事情）：

Example (with comments) on JSFiddle

使用Javascript：

function fctCheck(food) {
    var elems = document.getElementsByName("subselector");
        for (var i = 0; i < elems.length; i++) {
            elems.item(i).style.display = "none";
        }
        document.getElementById(food).style.display = "block";
    }

HTML：

<select id="food"onchange="fctCheck(this.value);">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" name="subselector" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" name="subselector" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

干杯，
弗洛里安

Answer 2

您需要检查option值：

fctCheck(this.options[ this.options.selectedIndex ].value)

this.options是当前<option>中<select>个元素的集合，this.options.selectedIndex是整数值，显示当前选择的选项。

顺便说一句，你的代码中有一个拼写错误：

document.getElementbyId

应该是

document.getElementById

请参阅jsFiddle demo

Answer 3

你只是有一个错字。

function fctCheck(food)
{
    if (food == "") {
        document.getElementById(food).style.display = "none";}
    } else {
        document.getElementById(food).style.display = "block";
    }
}

应该有效。

this.value

相当于

this.options[this.options.selectedIndex].value

根据下拉列表中选择的内容隐藏和显示HTML元素

3 个答案: