1

我的网站是用经典的 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";}
    }
4

3 回答 3

3

正如 st3inn 所提到的，这this.value绝对没问题 - 只有document.getElement==>B<==yId.

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

您可以通过在显示所选项目的子选项之前先隐藏所有子选项来避免这种情况。这可以通过这种方式完成（通过额外的名称属性，或者，如果您选择使用 jQuery，您可以做一些更复杂的事情）：

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>

干杯，
弗洛里安

于 2013-11-01T14:27:43.300 回答
0

您需要检查option值：

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

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

顺便说一句，您的代码中有错字：

document.getElementbyId

应该

document.getElementById

参见jsFiddle 演示

于 2013-11-01T13:58:28.303 回答
0

你只是有一个错字。

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
于 2013-11-01T14:10:20.593 回答