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

Question

我的网站是用 ASP classic - VBScript 创建的(不是我的选择，是一种我之前从未接触过的语言)。我正在尝试在其中创建一个网页:下拉菜单会根据第一个菜单中选择的内容显示一个额外的下拉菜单。我正在尝试使用 javascript 函数来实现此目的。

例子:

在第一个下拉菜单中，用户选择冰淇淋或薯片。 根据用户选择的内容，另一个下拉菜单提供了口味选择。

冰淇淋: Vanilla 、巧克力、薄荷。
薯片:现成的盐渍、奶酪和洋葱、盐和醋。

这是我的代码目前的样子:

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 的错字.

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

您可以通过在显示所选项目的子选择之前先隐藏所有子选择来避免这种情况。可以通过这种方式完成(通过附加名称属性，或者，如果您选择使用 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>  

干杯，
弗洛里安