CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 49

hide and show acoording the select value

I have selectbox. i would like to hide all the divs that doesn't contain the select value, and show only the div with the same id

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

Upvotes: 0

Views: 36

Answers (3)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use the css selector for JQuery that selects the start with class to hide the elements 

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

Remove display:none; from each element if you want the div to be visible on page load.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Add a common class i.e. style to all the div, then use it to hide.

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

Script

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


$('.filter-style select').on('change', function() {
  $('.style').hide();
  $(".style" + this.value).show();
})
<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>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic is almost correct, you just need to hide() all the elements before showing the required ones. You can make that simpler by wrapping them in a container, like this:

$('.filter-style select').on('change', function() {
  $('.style-container div').hide();
  $(".style" + this.value).show();
})
<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>

Upvotes: 1

Related Questions