Javascript 是否基于选定的下拉列表值隐藏/显示循环？

很抱歉格式不好。我在手机上

你好

我只是想知道如何将下面的函数变成一个循环

现在，我只是一遍又一遍地重复同样的事情。我有一个从示例1到示例30的文本框ID。30个文本框。还有一个下拉列表

值范围为1-30。如果我从下拉列表中选择5，它将显示5个文本框，并隐藏其余的文本框

我目前有：

$document.readyfunction{

$('#containers').on('change', function() {

if (this.value == '1'){

                            $(".Container1").show();

            $('.Container2').hide();$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

} 

            else if (this.value == '2'){

                            $(".Container1").show();

                            $(".Container2").show();

            $('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '3'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

            $('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '4'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

                            $(".Container4").show();

            $('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '5'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

                            $(".Container4").show();

                            $(".Container5").show();

            $('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            });

---

正如你所看到的，这是一种糟糕的方法。坦白说，这很尴尬。我尝试过循环，但无法找到它。如果你可以更改HTML，那么最好在所有文本框中添加一个公共类，说公共，然后执行此操作

$('#containers').on('change', function() {
        $('.common').hide();
        let x = $(this).val();
        for(var s = 0  ; s < x ; s++)
            $($('.common')[s]).show();

});

如果无法编辑html，请执行此操作

$('#containers').on('change', function() {
        $('input[id^="example"]').hide();
        let x = $(this).val();
        for(var s = 0  ; s < x ; s++)
            $('#example'+ (s+1)).show();

});

编辑：如果您需要ref，请使用Fiddle链接

---

纯js解决方案；我使用了5个输入框；请根据您的情况将其扩展到30个

document.getElementByIddropDown.onchange=showHideInputBox； 函数showHideInputBox{ 让chosenValue=document.getElementByIddropDown.value； 让AllInputBox=document.getElementsByTagNameinput； fori=0；i

---

jsFIDLE可以找到

谢谢你的回复。是的，我可以更改类。这是最好的选择吗？我已经做了编辑，你可以不用更改html@MailBladeThanks来完成。很多人，你刚刚为我节省了大量工作。我很确定这会起作用。现在要测试它。只需检查文本框是否有类或IDse在您编写的问题中，他们有ID，但在您的代码中，您使用了类：P@MailBladeGreat解决方案，非常感谢，mate。将根据需要应用缩放。

<select id="containers">
  <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>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>

<div id='input-containers' style="display:none;">
  <input type="text" class="input-containers Container1" value="Container1">
  <input type="text" class="input-containers Container2" value="Container2">
  <input type="text" class="input-containers Container3" value="Container3">
  <input type="text" class="input-containers Container4" value="Container4">
  <input type="text" class="input-containers Container5" value="Container5">
  <input type="text" class="input-containers Container6" value="Container6">
  <input type="text" class="input-containers Container7" value="Container7">
  <input type="text" class="input-containers Container8" value="Container8">
  <input type="text" class="input-containers Container9" value="Container9">
  <input type="text" class="input-containers Container10" value="Container10">
  <input type="text" class="input-containers Container11" value="Container11">
  <input type="text" class="input-containers Container12" value="Container12">
  <input type="text" class="input-containers Container13" value="Container13">
  <input type="text" class="input-containers Container14" value="Container14">
  <input type="text" class="input-containers Container15" value="Container15">
  <input type="text" class="input-containers Container16" value="Container16">
  <input type="text" class="input-containers Container17" value="Container17">
  <input type="text" class="input-containers Container18" value="Container18">
  <input type="text" class="input-containers Container19" value="Container19">
  <input type="text" class="input-containers Container20" value="Container20">
  <input type="text" class="input-containers Container21" value="Container21">
  <input type="text" class="input-containers Container22" value="Container22">
  <input type="text" class="input-containers Container23" value="Container23">
  <input type="text" class="input-containers Container24" value="Container24">
  <input type="text" class="input-containers Container25" value="Container25">
  <input type="text" class="input-containers Container26" value="Container26">
  <input type="text" class="input-containers Container27" value="Container27">
  <input type="text" class="input-containers Container28" value="Container28">
  <input type="text" class="input-containers Container29" value="Container29">
  <input type="text" class="input-containers Container30" value="Container30">
</div>


$(document).ready(function() {

  function hideAllContainers() {
    //put common class for all containers
    $(".input-containers").hide();
    $("#input-containers").show();
  }

  $('#containers').on('change', function() {

    hideAllContainers();
    var count = parseInt(this.value);

    for (i = 1; i <= count; i++) {
    console.log($(".Container" + i));
      $(".Container" + i).show();
    }
  });
});