Как скрывать или показывать div в зависимости от select?

Question

[chameleonestest]

Здравствуйте.

Имею вот такой select с двумя параметрами:

<div class="popup__mem d-flex">
<div class="popup__mem__title"><h3>Объём памяти:</h3></div>
<div class="select-mem">
<select name="mem" id="mem">
<option class="GB64" value="64GB">64ГБ</option>
<option class="GB128" value="128GB">128ГБ</option>
</select>
</div>

И два div, которые должны показываться в зависимости от select

<div class="total-price-1">
<s class="product__oldprice ">54 999 p.</s>
<h1 class="product_newprice">49 999 p.</h1>
</div>
<div class="total-price-2">
<s class="product__oldprice ">62 999 p.</s>
<h1 class="product_newprice">55 999 p.</h1>
</div>

Стили прописал вот такие:

.total-price-1 {
	margin-right: 42px;
	text-align: right;
	padding: 0;
	margin-bottom: 0;
        display: none;
	}
.total-price-1.active {
	display: block !important;
}
.total-price-2 {
	margin-right: 42px;
	text-align: right;
	padding: 0;
	margin-bottom: 0;
        display: none;
	}
.total-price-2.active {
	display: block !important;
}

А в JS вот так прописал:

$(document).ready(function(){
    $('#mem').change(function(){
        if ($('#mem option:selected').hasClass("GB64")) {
            $("total-price-1").addClass('active');
       }
        if ($('#mem option:selected').hasClass("GB128")) {
            $("total-price-2").addClass('active');
       }
    });

Понимаю, что здесь есть ошибка, но никак не могу её найти (мой уровень по шкале крепости Протодьяконова примерно 1, прошу прощения, если что не так написал)

Помогите найти ошибку, большое спасибо!

Answer 1

[Sergey]

Ошибка в JS как минимум в том, что Вы обращаясь к блокам по классу, не указали точку перед классом.
Ну и код можно написать так:

$(document).ready(function(){
    $('#mem').change(function(){
        if ( $(this).val() === '64GB' ) {
            $('.total-price-1').addClass('active');
            $('.total-price-2').removeClass('active');
        } else if ( $(this).val() === 'GB128' ) {
            $('.total-price-1').removeClass('active');
            $('.total-price-2').addClass('active');
        }
    });

Comments

[chameleonestest]

Большое спасибо за ответ!
Но, к сожалению, не работает, ни так ни так...

[Sergey]

chameleonestest, Все работает!

<div class="container">
  <h3>Объем памяти:</h3>
  <select name="mem" id="mem">
    <option value="">Выберете кол-во памяти</option>
    <option value="64GB">64ГБ</option>
    <option value="128GB">128ГБ</option>
  </select>
</div>

<div class="result">
  <div class="result1">
    <s class="product__oldprice ">54 999 p.</s>
    <h1 class="product_newprice">49 999 p.</h1>
  </div>
  <div class="result2">
    <s class="product__oldprice ">62 999 p.</s>
    <h1 class="product_newprice">55 999 p.</h1>
  </div>

.result1, .result2 {
  display: none;
}

.result1.active, .result2.active {
  display:block;
}

$('#mem').change(function() {
  if($(this).val() === "64GB") {
    $(".result1").addClass("active");
    $(".result2").removeClass("active");
  } else if($(this).val() === "128GB") {
    $(".result1").removeClass("active");
    $(".result2").addClass("active");
  }
})

[Sergey]

Вот в действии: https://codepen.io/Firsov36/pen/abOJdmb

[chameleonestest]

Спасибо огромное!
Если бы не Ваше второе сообщение, то я бы стал лысым, ведь не получалось нигде код воссоздать!!
Спасибо ещё раз!!!!

[Sergey]

chameleonestest, Пожалуйста, рад был помочь.

[Sergey]

chameleonestest, отметьте вопрос решенным.

Answer 2

[Ibishka]

$(document).ready(function(){
    $('#mem').change(function(){
        if ($('#mem option:selected').val() == '64GB') {
            $("total-price-1").addClass('active');
       }
        if ($('#mem option:selected').val() == '128GB') {
            $("total-price-2").addClass('active');
       }
    });

Answer 3

[b4rret]

Никакие :selected не нужны! Просто:

$(document).ready(function(){
    var memSelect = $('#mem');
    memSelect.change(function() {
        if ( memSelect.val() === '64GB' ) {
            $('total-price-1').addClass('active');
            $('total-price-2').removeClass('active');
        } else if ( memSelect.val() === 'GB128' ) {
            $('total-price-1').removeClass('active');
            $('total-price-2').addClass('active');
        }
    })
});

Вообще, на будущее, создавай такие вопросы на jsfiddle и т. п. Быстрей найдешь решение! Заходить в редактор и проверять правильность бывает лень )