There is a code for displaying divs depending on the selected values ​​of selects. But it does not display the nested code. Those. If there is just text in the block, it will be displayed, but if there is still a block inside, it will not be displayed. Tell me, please, how to fix it? Code below:

$(function() { $("#people, #days").on("change", function() { $(".all-price div, .all-blocks div").hide(); $("#pr" + $("#people").val() + '-' + $("#days").val()).show(); $("#bl" + $("#people").val() + '-' + $("#days").val()).show(); }); }); 
 .podbor { display: block; } .drop { cursor: pointer; overflow: hidden; display: inline-block; position: relative; border-radius: 3px; padding: 10px; outline: 0; letter-spacing: .2px; border: 1px solid #ecebeb; } .all-price { font-size: 18px; font-weight: bold; display: inline-block; padding: 10px 20px; } .all-price>div { display: none } .all-blocks { width: 300px; height: 300px; background-color: #f9f9f9; } .all-blocks>div { display: none } #pr2-5, #bl2-5{ display:block; } .1c3d{width:100px;height:50px;background-color:red;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="podbor"> Для <select class="drop" id="people"> <option value="1">1-го</option> <option value="2" selected>2-х</option> <option value="s">семьи</option> </select> на <select class="drop" id="days"> <option value="3">3 дня</option> <option value="5" selected>5 дней</option> </select> <div class="all-price"> <div id="pr1-3">Цена для 1-го на 3 дня ХХХХХХ</div> <div id="pr1-5">Цена для для 1-го на 5 дней ХХХХХХ</div> <div id="pr2-3">Цена для 2-х на 3 дня ХХХХХХ</div> <div id="pr2-5">Цена для 2-х на 5 дней ХХХХХХ</div> <div id="prs-3">Цена для семьи на 3 дня ХХХХХХ</div> <div id="prs-5">Цена для семьи на 5 дней ХХХХХХ</div> </div> </div> <div class="all-blocks"> <div id="bl1-3">Содержимое блока для 1-го на 3 дня</div> <div id="bl1-5">Содержимое блока для 1-го на 5 дней</div> <div id="bl2-3">Содержимое блока для 2-х на 3 дня<div class="1c3d">Вот такая Хурма!</div></div> <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div> <div id="bls-3">Содержимое блока для семьи на 3 дня</div> <div id="bls-5">Содержимое блока для семьи на 5 дней</div> </div> 

    1 answer 1

    Hide only the first level blocks.

     $(".all-price > div, .all-blocks > div").hide(); 

     $(function() { $("#people, #days").on("change", function() { $(".all-price > div, .all-blocks > div").hide(); $("#pr" + $("#people").val() + '-' + $("#days").val()).show(); $("#bl" + $("#people").val() + '-' + $("#days").val()).show(); }); }); 
     .podbor { display: block; } .drop { cursor: pointer; overflow: hidden; display: inline-block; position: relative; border-radius: 3px; padding: 10px; outline: 0; letter-spacing: .2px; border: 1px solid #ecebeb; } .all-price { font-size: 18px; font-weight: bold; display: inline-block; padding: 10px 20px; } .all-price>div { display: none } .all-blocks { width: 300px; height: 300px; background-color: #f9f9f9; } .all-blocks>div { display: none } #pr2-5, #bl2-5{ display:block; } .1c3d{width:100px;height:50px;background-color:red;} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="podbor"> Для <select class="drop" id="people"> <option value="1">1-го</option> <option value="2" selected>2-х</option> <option value="s">семьи</option> </select> на <select class="drop" id="days"> <option value="3">3 дня</option> <option value="5" selected>5 дней</option> </select> <div class="all-price"> <div id="pr1-3">Цена для 1-го на 3 дня ХХХХХХ</div> <div id="pr1-5">Цена для для 1-го на 5 дней ХХХХХХ</div> <div id="pr2-3">Цена для 2-х на 3 дня ХХХХХХ</div> <div id="pr2-5">Цена для 2-х на 5 дней ХХХХХХ</div> <div id="prs-3">Цена для семьи на 3 дня ХХХХХХ</div> <div id="prs-5">Цена для семьи на 5 дней ХХХХХХ</div> </div> </div> <div class="all-blocks"> <div id="bl1-3">Содержимое блока для 1-го на 3 дня</div> <div id="bl1-5">Содержимое блока для 1-го на 5 дней</div> <div id="bl2-3">Содержимое блока для 2-х на 3 дня<div class="1c3d">Вот такая Хурма!</div></div> <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div> <div id="bls-3">Содержимое блока для семьи на 3 дня</div> <div id="bls-5">Содержимое блока для семьи на 5 дней</div> </div> 

    • Thank you very much. I'm too inattentive. - Newageman