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

只需在选择框上添加一个类，比如＆＃34; kidsageselect＆＃34;然后让你的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设置为显示：之前没有给所有选择ONE class =＆＃34; randomclass＆＃34;并设置该类中的所有元素display：none 或者通过循环或ony逐个设置em来显示：none like

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

会隐藏最后一个选择f.E。

想要使用javascript显示和隐藏下拉列表

3 个答案: