Hide and show specific divs on select

Question

Okay i have dynamic categories that i select from data base ,i put them in a select drop down, and each categorie has multi articles, first of all i display all articles the problem is,i want to on select a categorie,i only display articles related to that categorie and hide the rest, for that i put the articles in divs ,and each div it has it own related categorie class. im stuck how to hide and display them tho here is my code for example:

 <select  id="selectleft" >
     <option value="categorie">categorie</option></center>
         <option value="categorie1">sport</option>
         <option value="categorie2">movies</option>
         <option value="categorie3">news</option>


        </select>

and the articles are displayed like this

<div class="categorie1>article 1 </div>
<div class="categorie1>article 2 </div>
<div class="categorie2>article 1 </div>
<div class="categorie2>article 2 </div
<div class="categorie3>article 3 </div>
<div class="categorie3>article 3 </div

okay i want for example if i select categorie1 ,all divs with class categorie 1 get showe and rest get hidden

Answer 1

This may help ;)

 $('#selectleft').change(function() { /* hide visible articles */ $('.category:visible').hide(); /* show selected option articles */ $('.' + this.value).show(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="selectleft"> <option value="categorie">categorie</option> <option value="categorie1">sport</option> <option value="categorie2">movies</option> <option value="categorie3">news</option> </select> <div class="category categorie">article(categorie option 1 default selected)</div> <div class="category categorie1">article 1(sport option 2)</div> <div class="category categorie1">article 2(sport option 2)</div> <div class="category categorie2">article 1(movies option 3)</div> <div class="category categorie2">article 2(movies option 3)</div> <div class="category categorie3">article 3(news option 4)</div> <div class="category categorie3">article 3(news option 4)</div>

Answer 2

You can use change() event handler

 $('#selectleft').change(function() { // hide all div $('.categorie').hide(); // or hide only the rest by // $('.categorie').not('.' + this.value).hide(); // show div based on selected option $('.' + this.value).show(); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="selectleft"> <option value="categorie">categorie</option> <option value="categorie1">sport</option> <option value="categorie2">movies</option> <option value="categorie3">news</option> </select> <div class="categorie categorie1">article 1</div> <div class="categorie categorie1">article 2</div> <div class="categorie categorie2">article 1</div> <div class="categorie categorie2">article 2</div> <div class="categorie categorie3">article 3</div> <div class="categorie categorie3">article 3</div>

Answer 3

According to what you have told, I made the code. please check the following snippet.

 $('#selectleft').change(function() { $('.article').addClass('deactive'); var x = $('#selectleft').val(); $('.'+x).removeClass('deactive'); });

 .deactive{display:none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1> select cotegories</h1> <select id="selectleft" > <option value="categorie">categorie</option> <option value="categorie1">sport</option> <option value="categorie2">movies</option> <option value="categorie3">news</option> </select> <div class="article deactive categorie1">article 1 </div> <div class="article deactive categorie1">article 2 </div> <div class="article deactive categorie2">article 3 </div> <div class="article deactive categorie2">article 4 </div> <div class="article deactive categorie3">article 5 </div> <div class="article deactive categorie3">article 6 </div>

Answer 4

<script>
$('#selectleft').change(function()
{
   var x = $('#select').val();
   $('.x').hide();
});
</script>