It is necessary for me that when a certain option is selected in a select, a certain div with content is shown, and the remaining divs with content are not displayed. I wrote such a code, but this is a full r although it works. Please correct, I can not understand the logic of how to make normal function and arrays, if I think in the right direction.

<script> $('#select').on('change', function() { var value = $(this).val(); if (value == 'wwwsel') { $('#www').css('display', 'inherit'); $('#regular').css('display', 'none'); $('#banners').css('display', 'none'); $('#adult').css('display', 'none'); $('#eshop').css('display', 'none'); } if (value == 'eshopsel') { $('#eshop').css('display', 'inherit'); $('#regular').css('display', 'none'); $('#banners').css('display', 'none'); $('#adult').css('display', 'none'); $('#www').css('display', 'none'); } if (value == 'bannerssel') { $('#banners').css('display', 'inherit'); $('#regular').css('display', 'none'); $('#www').css('display', 'none'); $('#adult').css('display', 'none'); $('#eshop').css('display', 'none'); } if (value == 'adultsel') { $('#adult').css('display', 'inherit'); $('#regular').css('display', 'none'); $('#banners').css('display', 'none'); $('#www').css('display', 'none'); $('#eshop').css('display', 'none'); } if (value == 'regularsel') { $('#regular').css('display', 'inherit'); $('#www').css('display', 'none'); $('#banners').css('display', 'none'); $('#adult').css('display', 'none'); $('#eshop').css('display', 'none'); } }); </script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="works"> <select id="select"> <option value="wwwsel"><a class="dropdown-item" href="">WWW</a></option> <option value="eshopsel"><a class="dropdown-item" href="">E-SHOP</a></option> <option value="bannerssel"><a class="dropdown-item" href="">BANNERS</a></option> <option value="adultsel"><a class="dropdown-item" href="">ADULT</a></option> <option value="regularsel" selected><a class="dropdown-item" href="">REGULAR</a></option> </select> </div> </div> </div> <div id="gallery-thumbs" class="row"> <div style="display: inherit;" class="row" id="regular"> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> </div> <div style="display: none;" class="row" id="eshop"> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> </div> <div style="display: none;" class="row" id="www"> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> </div> <div style="display: none;" class="row" id="banners"> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> </div> <div style="display: none;" class="row" id="adult"> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/render1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> </div> </div> <div class="views"><a href="portfolio.html" class="more">VIEW MORE</a></div> </div> <div class="arch container-fluid"> <div class="row"> <div class="arch_field"> <a href="architecture.html"><img class="img-responsive" src="img/arch.png"></a> </div> </div> </div>

    2 answers 2

     $('#select').on('change', function() { var value = $(this).val(); $("#gallery-thumbs > .row").addClass("hidden"); $("#" + value).removeClass("hidden"); }); $('#select').change(); 
     .hidden { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="works"> <select id="select"> <option value="www"><a class="dropdown-item" href="">WWW</a></option> <option value="eshop"><a class="dropdown-item" href="">E-SHOP</a></option> <option value="banners"><a class="dropdown-item" href="">BANNERS</a></option> <option value="adult"><a class="dropdown-item" href="">ADULT</a></option> <option value="regular" selected><a class="dropdown-item" href="">REGULAR</a></option> </select> </div> </div> </div> <div id="gallery-thumbs" class="row"> <div class="row" id="regular">regular <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> regular</div> <div class="row" id="eshop">eshop <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> eshop</div> <div class="row" id="www">www <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> www</div> <div class="row" id="banners">banners <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> banners</div> <div class="row" id="adult">adult <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/render1.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work2.png" class="img-responsive"> </div> </div> <div class="col-md-4 item"> <div class="thumbnail"> <img src="img/work3.png" class="img-responsive"> </div> </div> adult</div> </div> <div class="views"><a href="portfolio.html" class="more">VIEW MORE</a></div> </div> <div class="arch container-fluid"> <div class="row"> <div class="arch_field"> <a href="architecture.html"><img class="img-responsive" src="img/arch.png"></a> </div> </div> </div>

    • Thank! Works! - Vadim
    • @Vadim Please. Successes! - Igor
     $('#select').on('change', function() { var value = $(this).val(); // Π΄ΠΈΠ²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ класс ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡ… Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ всС ΠΈ ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ // Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ это класс `row` Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ спСцифичСский // Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ НЕнуТныС элСмСнты с Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ классом $('.row').css('display', 'none'); $('#' + value).css('display', 'inherit'); });
    • Thank! Works! - Vadim