Question

我有选择框。我想隐藏所有不包含选择值的div，并只显示具有相同id的div

<div class="filter-style">
        <select class="selectpicker" name="stylesID_array[]" >
            <option...></option>
            <option...></option>
        </select>
</div>  

<div class="style4 style1">....</div>
<div class="style2">....</div>
<div class="style3 style6">....</div>
<div class="style3">....</div>
<div class="style4">....</div>

JS：

$('.filter-style select').on('change', function() {
    $(".style" + this.value).show();
})

Answer 1

为所有div添加一个公共类，即style，然后使用它来隐藏。

<div class="style style4 style1">....</div>

脚本

$(".style").hide();

＆＃13;

$('.filter-style select').on('change', function() {
  $('.style').hide();
  $(".style" + this.value).show();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-style">
  <select class="selectpicker" name="stylesID_array[]">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>6</option>
  </select>
</div>


<div class="style style4 style1">4, 1</div>
<div class="style style2">2</div>
<div class="style style3 style6">3, 6</div>
<div class="style style3">3</div>
<div class="style style4">4</div>

＆＃13;

Answer 2

您的逻辑几乎是正确的，您只需要hide()所有元素，然后再显示所需的元素。您可以通过将它们包装在容器中来实现这一点，如下所示：

＆＃13;

$('.filter-style select').on('change', function() {
  $('.style-container div').hide();
  $(".style" + this.value).show();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-style">
  <select class="selectpicker" name="stylesID_array[]">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>6</option>
  </select>
</div>

<div class="style-container">
  <div class="style4 style1">4, 1</div>
  <div class="style2">2</div>
  <div class="style3 style6">3, 6</div>
  <div class="style3">3</div>
  <div class="style4">4</div>
</div>

＆＃13;

Answer 3

您可以使用css选择器为JQuery选择start with类来隐藏元素

＆＃13;

 $(document).ready(function(){
  $('.filter-style select').on('change', function() {
    $("[class^='style']").hide();
    $(".style" + this.value).show();
  })
   
 })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-style">
        <select class="selectpicker" name="stylesID_array[]" >
            <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>
        </select>
</div>  

<div class="style4 style1" style="display:none;">1 and 4</div>
<div class="style2" style="display:none;">2</div>
<div class="style3 style6" style="display:none;">3 and 6</div>
<div class="style3" style="display:none;">3</div>
<div class="style4" style="display:none;">4</div>

＆＃13;

如果您希望div在页面加载时可见，请从每个元素中删除display:none;。

隐藏并显示选择值

3 个答案: