0

Есть два select. В первом три option, во втором два. Есть две пачки блоков по 6 штук в каждой. Как при выборе значений в обоих select-ах выводить блоки соответсвующие значениям этих select-ов? Код ниже:

.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;
}

.price {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
}

.price>div {
  display: none
}

.blocks {
  width: 300px;
  height: 300px;
  background-color: #f9f9f9;
}

.blocks>div {
  display: none
}
<div class="podbor">
  Для
  <select class="drop" id="people">
    <option>1-го</option>
    <option selected>2-х</option>
    <option>семьи</option>
  </select>
  на
  <select class="drop" id="days">
    <option>3 дня</option>
    <option selected>5 дней</option>
  </select>
  <div class="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="blocks">
  <div id="bl1-3">Содержимое блока для 1-го на 3 дня</div>
  <div id="bl1-5">Содержимое блока для 1-го на 5 дней</div>
  <div id="bl2-3">Содержимое блока для 2-х на 3 дня</div>
  <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div>
  <div id="bls-3">Содержимое блока для семьи на 3 дня</div>
  <div id="bls-5">Содержимое блока для семьи на 5 дней</div>
</div>

1 ответ 1

2

$(function() {
  $("#people, #days").on("change", function() {
    $(".price div, .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;
}

.price {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
}

.price>div {
  display: none
}

.blocks {
  width: 300px;
  height: 300px;
  background-color: #f9f9f9;
}

.blocks>div {
  display: none
}
<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="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="blocks">
  <div id="bl1-3">Содержимое блока для 1-го на 3 дня</div>
  <div id="bl1-5">Содержимое блока для 1-го на 5 дней</div>
  <div id="bl2-3">Содержимое блока для 2-х на 3 дня</div>
  <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div>
  <div id="bls-3">Содержимое блока для семьи на 3 дня</div>
  <div id="bls-5">Содержимое блока для семьи на 5 дней</div>
</div>

4
  • 1
    Спасибо, большое, за быстрый ответ и за помощь.
    – Newageman
    27 мар 2019 в 14:25
  • А можно ли сделать так, чтобы блоки показывалась сразу для значений по умолчанию? Т.е. по умолчанию выбраны для 2-х на 5 дней. И для этих значений div-ы цена и содержимое блока отображалась изначально, а не после выбора. Или это совсем другая задача?
    – Newageman
    27 мар 2019 в 14:32
  • 1
    @Newageman самое простое отображать блоки по умолчанию через css если ивестны значения по умолчанию - jsfiddle.net/dvfas8g7 или через javascript/jquery, если значения по умолчанию не известны(если нужно, напишите пожалуйста)
    – Alex
    27 мар 2019 в 14:43
  • 1
    Вот я затупил. Я именно то что вы предложили делал, но допустил ошибку и ничего не работало. А у вас всё верно. Ещё раз спасибо.
    – Newageman
    27 мар 2019 в 14:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.