想要使用JavaScript显示和隐藏下拉菜单

Question

我有一个下拉列表，用于“访客数量”，然后需要显示另一个下拉列表，该下拉列表将针对每个客人的年龄。 可以说，如果某个人从客人人数中选择2个，那么其他2个下拉菜单将显示以选择他们的年龄。 到目前为止，我已经使用下面的代码完成了操作，但是问题是如果某个主体首先错误地选择了2并返回到一个，则显示的下拉菜单将保留在那里，而一个下拉菜单应隐藏起来。 请参考以下代码：

CSS：

#kidsage40, #kidsage41, #kidsage42
{
    display:none;
}

HTML：

<select name="kids4" onChange="showroom4kidsage(this.value);">
    <option value="0">Kids</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select name="kidsage40" id="kidsage40">
    <option value="0">Kids Age</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option> 
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option> 
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>     
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
</select>

<select name="kidsage41" id="kidsage41">
    <option value="0">Kids Age</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option> 
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option> 
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>     
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
</select>

<select name="kidsage42" id="kidsage42">
    <option value="0">Kids Age</option>
    <option value="1">1</option>
    <option value="3">2</option>
    <option value="3">3</option> 
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option> 
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>     
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
</select>

JAVASCRIPT：

function showroom4kidsage(value)
{
    for(i=0;i<value;i++)
    {
        kidsage = 'kidsage1'+i;
        document.getElementById(kidsage).style.display = "block";
    }
}

Answer 1

只需将一个类添加到选择框，说“ kidsageselect”，然后让您的javascript执行此操作：

function showroom4kidsage(value) { var elems = document.getElementsByClassName('kidsageselect'); for (var i = 0; i < elems.length; i++) { elems[i].style.display = 'none'; } for(var i = 0; i < value; i++) { kidsage = 'kidsage4'+i; document.getElementById(kidsage).style.display = "block"; } }

Answer 2

最简单的方法是先将它们全部隐藏，然后循环将显示正确的溺水次数。

function showroom4kidsage(value){
    for(i=0;i<3;i++){
       document.getElementById('kidsage4' + i).style.display = "none";
    }   

   for(i=0;i<value;i++){
        kidsage = 'kidsage4'+i;
        document.getElementById(kidsage).style.display = "block";
    }
}

或添加一个类名以使访问这些输入更加容易：

<select class="foo" id="kidsage41>...</select>
<select class="foo" id="kidsage42>...</select>

然后您可以：

function showroom4kidsage(value){
   document.getElementByClassName('foo').style.display = "none";

   for(i=0;i<value;i++){
        kidsage = 'kidsage4'+i;
        document.getElementById(kidsage).style.display = "block";
    }
}

Answer 3

您必须将所有SELECTS设置为display：none，然后再给所有这些选择一个ONE class =“ randomclass”并设置该类中的所有元素display：none或通过循环一个一一地设置em或将它们一一设置为display：none

document.getElementById('kidsage42').style.display = "none";

这将隐藏最后选择的fE