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

我的网站是在ASP classic - VBScript中创建的（不是我的选择，也是我之前没有过的语言）。我试图在其中创建一个网页：下拉菜单显示了基于第一个选择内容的额外下拉菜单。我正在尝试使用JavaScript函数来实现这一点。根据在下拉列表中选择的内容隐藏和显示HTML元素

实施例：

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

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

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

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";} 
    }

来源

2013-11-01 Qui

绝对是很好 - 有只是document.getElement==>B<==yId错字。

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

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

干杯，
弗洛里安

来源

2013-11-01 14:27:43

谢谢弗洛里安，这是做到了。 – Qui

您需要检查option值来代替：

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

this.options是<option>元素集合当前的<select>里面，this.options.selectedIndex是显示整数什么选项当前选中。

BTW你有一个错字在你的代码：

document.getElementbyId

应该

document.getElementById

见jsFiddle demo

来源

2013-11-01 13:58:28 antyrat

感谢您发现错字 - 文章已被编辑。 – Qui

看看你的jsFiddle演示。有没有办法重新隐藏元素。例如如果我选择薯片，但然后改变我的想法冰淇淋是否有可能隐藏薯片下拉？ – Qui

你只是有一个错字。

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

应该工作。

this.value

由st3inn this.value提到相当于

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

来源

2013-11-01 14:10:20 st3inn

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

回答

相关问题