如何根據下拉選擇顯示和隱藏 div 元素

Question

嗨，我想根據下拉選擇顯示和隱藏 div 元素。 我知道這個問題已經被問了很多次，我已經嘗試了另一個問題中發布的方法，但無濟於事。 我希望在第一次選擇時，第一個 div 應該只顯示，在第二次選擇時，第一個和第二個 div 都應該顯示，依此類推。 我想不出一個 jquery 來做到這一點。我的代碼如下：-

 $(document).ready(function(){ $("select").change(function(){ $(this).find("option:selected").each(function(){ if($(this).attr("value")=="one"){ $(".subject").not(".one").hide(); $(".one").show(); } else if($(this).attr("value")=="two"){ $(".subject").not(".two").hide(); $(".two").show(); } else{ $(".subject").hide(); } }); }).change(); });

 .subject{ display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="subjects" id="select" class="form-control"> <option value="">Number of Subjects</option> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> <div class="one subject" id="one subject"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode1" class="form-control"> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname1" class="form-control"> </div> </div> </div> <div class="two subject" id="two subject"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control"> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control"> </div> </div> </div>

因此，如果用戶選擇選項值一，那么如果他選擇選項值二，則應顯示具有一個類的 div，則應顯示 div 一和二，如果未選擇任何內容，則不應顯示任何內容。 我已經創建了 javascript 函數，它只顯示單個 div，而不是兩個，我無法想出一種方法來顯示兩者。任何幫助將不勝感激。 Javascript代碼：-

Answer 1

嘗試這個

 $('#select').on('change', function(){ $('.subject').hide(); $('.'+this.value).show(); });

 .subject { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="subjects" id="select" class="form-control"> <option value="">Number of Subjects</option> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> <div class="one two three subject" id="one"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode1" class="form-control"> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname1" class="form-control"> </div> </div> </div> <div class="two three subject" id="two"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control"> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control"> </div> </div> </div> <div class="three subject" id="three"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control"> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control"> </div> </div> </div>

Answer 2

我對你的問題做了一個快速的調整......以及對 Rayons 評論的一些改動。

https://jsfiddle.net/s237qaak/

$(document).ready(function() {
  $('#one, #two').hide();
  $('#select').on('change', function() {
    $('#one, #two').hide();
    $('#' + this.value).show()
  });

});

Answer 3

為每個 div 的命名toggle添加了一個新類，用於隱藏所有 div。 並使用this僅顯示選定的 div。

查詢：

$('#select').on("change", function(){
    $(".toggle").css({ "display" : "none"} );
    var val = $(this).val();
    $("#"+val).css({ "display" : "block"} )
});

完整的小提琴

Answer 4

試試這個 Jquery 代碼。 另外，將類框添加到每個 div(one,two)

$(document).ready(function(){
    $("#select").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="one"){
                $(".box").not(".one").hide();
                $(".one").show();
            }
            else if($(this).attr("value")=="two"){
                $(".box").not(".two").hide();
                $(".two").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

Answer 5

邏輯是

1. 隱藏所有div 。
2. 使用.addEventListener('change')來“監聽”選擇的變化。
3. 更改后，使用this.value獲取值。
4. 再次，隱藏所有 div。
5. 顯示選定的 div。

到代碼：

 document.querySelector('#select').addEventListener('change', function(){ //[].forEach.call(document.querySelectorAll('.panel'), function(el) { // el.style.display = 'none'; //}); document.querySelector('#' + this.value).style.display = 'block'; console.log(document.querySelector('#' + this.value)); });

 .panel { display:none; }

 <select name="subjects" id="select" class="form-control"> <option value="">Number of Subjects</option> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> <div class="one panel" id="one"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode1" class="form-control" placeholder="scode1" /> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname1" class="form-control" /> </div> </div> </div> <div class="two panel" id="two"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control" placeholder="scode2" /> </div> <div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control" /> </div> </div> </div>