Question

您好我想根据下拉选项显示和隐藏div元素。我知道这个问题已被问了很多时间，我已经尝试过在另一个问题中发布的方法，但无济于事。我希望在第一次选择时第一个div应该只显示，在第二个选择时第一个和第二个div应该显示，依此类推。我无法想到一个jquery来做这个。我的代码如下： -

＆＃13;

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

＆＃13;

.subject{
  display: none;
}

＆＃13;

<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>

＆＃13;

因此，如果用户选择选项值1，那么如果他选择了选项值2，则应显示具有一个类的div，然后将显示div 1和div两者，如果没有选择，则不应显示任何内容。我已经创建了javascript函数它只显示单个div而不是两个我无法想到一种方式来显示两者。任何帮助将非常感激。 Javascript代码： -

Answer 1

试试这个

＆＃13;

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

＆＃13;

.subject {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

为名为toggle的每个div添加了一个新类，用于隐藏所有div。并使用this仅显示所选的div。

<强> JQuery的：

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

Complete fiddle

Answer 4

试试这个Jquery代码。另外，将类框添加到每个div（一，二）

$(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

逻辑是

隐藏所有div s。
使用.addEventListener('change')“监听”选择的更改。
更改后，使用this.value获取值。
再次隐藏所有div。
显示所选的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>

如何根据下拉选择显示和隐藏div元素

5 个答案: