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>