選択したドロップダウン値に基づいてループを表示/非表示しますか？

Question

申し訳ありませんが、フォーマットが貧弱です。私はモバイルです。

こんにちは

私はちょうど私がループに次の関数を作ることができますどのように思ったんだけど？

現在、私は同じことを何度も何度も繰り返しているだけです。私は "example1"から "example30"になるテキストボックスIDを持っています。だから30のテキストボックス。ドロップダウンもあります

値は1から30です。ドロップダウンから「5」を選択すると、5つのテキストボックスが表示され、残りのテキストボックスは非表示になります。

私は現在、これがあります。あなたが見ることができるように

$（ドキュメント）.ready（関数（）{

$('#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(); 

      } 

      }); 

を、これは率直に言って、これを行うには恐ろしい方法です、それは恥ずかしいです。私はループを試みたが、あなたはすべてのテキストボックスが言うcommonに共通するクラスを追加して、これを実行するために、より良いそして、HTMLを変更することができる場合

Answer 1

それを把握することはできません、

そして、あなたはHTMLがこれを行う編集傾けるかの、

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

}); 

編集：フィドルリンクあなたが参照のために必要がある場合

https://jsfiddle.net/wfgvvpv9/

Answer 2

ピュアjsの溶液;私は5つの入力ボックスを使用しました。親切

document.getElementById("dropDown").onchange = showHideInputBoxes; 
 

 
function showHideInputBoxes() { 
 
    let chosenValue = document.getElementById("dropDown").value; 
 
    let allInputBoxes = document.getElementsByTagName("input"); 
 
    for(i=0;i<allInputBoxes.length;i++) { 
 
     let inputBoxId = allInputBoxes[i].getAttribute('id'); 
 
    \t \t if(inputBoxId<=chosenValue) { 
 
     allInputBoxes[i].classList.add('hide'); 
 
     } 
 
     else { 
 
     allInputBoxes[i].classList.remove('hide'); 
 
     } 
 
    } 
 
}

.hide { 
 
    display:none; 
 
}

<input id="1" type="text" value = "text of inputbox 1"> 
 
<input id="2" type="text" value = "text of inputbox 2"> 
 
<input id="3" type="text" value = "text of inputbox 3"> 
 
<input id="4" type="text" value = "text of inputbox 4"> 
 
<input id="5" type="text" value = "text of inputbox 5"> 
 

 
<select id="dropDown"> 
 
<option id="option-choose">choose num</option> 
 
<option id="option-1">1</option> 
 
<option id="option-2">2</option> 
 
<option id="option-3">3</option> 
 
<option id="option-4">4</option> 
 
<option id="option-5">5</option> 
 
</select>

Answer 3

<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(); 
    } 
    }); 
}); 

jsfiddleはお返事のためhere