如何在不同的下拉菜单选择中加载不同的内容？

时间：2019-04-23 11:30:41

标签： javascript jquery html css

我有一个下拉菜单，其中包含以下选项：

  • “ 全部”
  • “ 2019年4月21日”
  • “ 2019年4月22日”
  • “ 2019年4月23日”

我有4个div：

  • “ 所有标签”
  • “ 4月21日标签”
  • “ 4月22日标签”
  • “ 4月23日标签页”

所以我要实现的是，如果我从下拉列表中选择“ 所有”，则“ 所有标签” div应该仅加载，并且如果我选择“ 2019年4月21日”，则应该仅加载“ 4月21日标签”。

我该如何实现？

关于， 比尔

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="card shadow-2 mb-3">
  <div class="card-header">
    <div class="col-9 pl-0 float-left">
      <h4 class="card-heading mt-3 pt-2">
        Price Breakdown
      </h4>
    </div>
    <div class="col-3 float-right">
      <select class="form-control custom-select" id="conditionsselect1">
        <option selected="selected" value="">All</option>
        <option>21 April 2019</option>
        <option>22 April 2019</option>
        <option>23 April 2019</option>
      </select>
    </div>
  </div>

  <div>All Tab</div>
  <div>21 April Tab</div>
  <div>22 April Tab</div>
  <div>23 April Tab</div>

</div>

3 个答案:

答案 0 :(得分：3)

您是否正在尝试类似

    $(document).ready(function(){
  $("#conditionsselect1").change(function(){
    var val = $("#conditionsselect1").val();    
  //  $('.dyn-div:contains("'+val+'")').show();   

       $(".dyn-div").hide();
       $(".dyn-div."+val+"").show();
  });
});


$(document).ready(function(){
       $(".dyn-div").hide();
       $(".dyn-div."+$("#conditionsselect1").val()+"").show();
  $("#conditionsselect1").change(function(){
    var val = $("#conditionsselect1").val();    
  //  $('.dyn-div:contains("'+val+'")').show();   
  //  if(val == "all")
  //  {
  //    $(".dyn-div").show();
  //  }
  //  else
  //  {
       $(".dyn-div").hide();
       $(".dyn-div."+val+"").show();
  //  }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="card shadow-2 mb-3">
  <div class="card-header">
    <div class="col-9 pl-0 float-left">
      <h4 class="card-heading mt-3 pt-2">
        Price Breakdown
      </h4>
    </div>
    <div class="col-3 float-right">
      <select class="form-control custom-select" id="conditionsselect1">
        <option selected="selected" value="all">All</option>
        <option value="one">21 April 2019</option>
        <option value="two">22 April 2019</option>
        <option value="three">23 April 2019</option>
      </select>
    </div>
  </div>

  <div class="dyn-div all">All Tab</div>
  <div class="dyn-div one">21 April Tab</div>
  <div class="dyn-div two">22 April Tab</div>
  <div class="dyn-div three">23 April Tab</div>

</div>

答案 1 :(得分：1)

请检查这可能会有帮助。

 $(".jqSelector").change(function(){
			  $(".dataDivs").hide();
			  var optn = $(this).find(':selected').attr('data-show');
			  //alert(optn);
			  $("." + optn).show();
			  
		  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="card shadow-2 mb-3">
  <div class="card-header">
    <div class="col-9 pl-0 float-left">
      <h4 class="card-heading mt-3 pt-2">
        Price Breakdown
      </h4>
    </div>
    <div class="col-3 float-right">
      <select class="form-control custom-select jqSelector" id="conditionsselect1">
        <option selected="selected" value="" data-show="all">All</option>
        <option data-show="first">21 April 2019</option>
        <option data-show="second">22 April 2019</option>
        <option data-show="third">23 April 2019</option>
      </select>
    </div>
  </div>

  <div class="dataDivs all">All Tab</div>
  <div class="dataDivs all first">21 April Tab</div>
  <div class="dataDivs all second">22 April Tab</div>
  <div class="dataDivs all third">23 April Tab</div>

</div>

答案 2 :(得分：-1)

我对HTML进行了一些更改，并添加了一些jquery代码。只需看一下代码，您就会知道如何解决该问题。

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
 $('#conditionsselect1').on('change',function(){

    let selectVal= $(this).children("option").filter(":selected").attr('class');

    $('body table tbody').find('tr').hide();

    $('body table tbody').find('tr[class="'+selectVal+'"]').show();

})

</script>
</head>
<body>
<div class="card shadow-2 mb-3">
  <div class="card-header">
    <div class="col-9 pl-0 float-left">
      <h4 class="card-heading mt-3 pt-2">
        Price Breakdown
      </h4>
    </div>
    <div class="col-3 float-right">
      <select class="form-control custom-select" id="conditionsselect1">
        <option value="all" class="all">All</option>
        <option class="21">21 April 2019</option>
        <option class="22">22 April 2019</option>
        <option class="23">23 April 2019</option>
      </select>
    </div>
  </div>
  <table class="table table-user-information">
    <thead>
    <tr>
          <th></th>
          <th>Gross</th>
          <th>Net</th>
    </tr>
    </thead>
    <tbody>    
      <tr class="21">
        <td>Hello</td>
        <td>£30.00</td>
        <td>0.00</td>
      </tr>
      <tr class="22">
        <td>Hello 1</td>
        <td>£10.00</td>
        <td>0.00</td>
      </tr>
      <tr class="23">
        <td>Hello 2</td>
        <td>£7.00</td>
        <td>£7.00</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
相关问题
最新问题