1

Подскажите пожалуйста, как сделать,что-бы при выборе двух значений select показывало только один div?

Например, при выборе первого select - "Green" и второго "little box" отображался div: "Green little box".

Пробовал пример с цветами, но показывает два элемента div. Вот код:

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".big").not("." + optionValue).hide();
        $(".little").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".big").hide();
        $(".little").hide();
      }
    });
  }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select>
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>

  </select>
</div>
<div>
  <select>
    <option>Choose Size</option>
    <option value="big">big box</option>
    <option value="little">little box</option>
  </select>
</div>

<div class="red big">Red big box</div>
<div class="red little">Red little box</div>
<div class="green big">Green big box</div>
<div class="green little">Green little box</div>

2 ответа 2

1

$(document).ready(function() {
  $("select").change(function() {
    var classes = $(".selectors select").get().reduce((res, el) => {
      res.push(el.value);
      return res;
    }, [ "" ]);
    $(".colors-and-sizes div").hide();
    $(".colors-and-sizes div" + classes.join(".")).show();
  }).change();
});
.red {
  background:red;
  border: 1px solid black;
  margin:5px;
}
.green {
  background:green;
  border: 1px solid black;
  margin:5px;
}
.big {
  width:200px;
  height:60px;
}
.little {
  width:60px;
  height:60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectors">
  <select>
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>
<div class="selectors">
  <select>
    <option>Choose Size</option>
    <option value="big">big box</option>
    <option value="little">little box</option>
  </select>
</div>

<div class="colors-and-sizes">
  <div class="red big">Red big box</div>
  <div class="red little">Red little box</div>
  <div class="green big">Green big box</div>
  <div class="green little">Green little box</div>
</div>

2
  • Хорошее решение!
    – meine
    24 янв 2019 в 6:02
  • Большое спасибо! 24 янв 2019 в 15:57
1

var $color, $box, $element;

$("select").on("change", (e) => {
  $(e.target).attr("name") === "color" ? $color = $(e.target).val() : $box = $(e.target).val()
  $element = "." + $color + "." + $box;
  $("div:not(" + $element + ")").hide();
  $($element).show();
});
.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.small {
  width: 50px;
  height: 50px;
}

.large {
  width: 100px;
  height: 100px;
}

div {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="color">
  <option disabled selected>Choose your color</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<select name="box">
  <option disabled selected>Choose your box</option>
  <option value="small">Small</option>
  <option value="large">Large</option>
</select>

<div class="green small"></div>
<div class="green large"></div>
<div class="blue small"></div>
<div class="blue large"></div>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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