0

на сайте

есть выпадающий список с размерами постельного , мне нужно как то подцепится к option что бы при нажатие на него менялся класс у другого блока

2 ответа 2

0

Как-то так?

$('.vm-chzn-select').bind('change', function(){
  let i = $(this).val(); // Получаем выбранный
  i = $(this).find('option[value="'+i+'"]').index(); // Получаем позицию выбранного option
  let sClass; // Создаём переменную под класс
  // Если выбран n option, то класс "рабочего" элемента..
  if(i==0) sClass = '.item1';
  if(i==1) sClass = '.item2';
  if(i==2) sClass = '.item3';
  if(i==3) sClass = '.item4';
  if(i==4) sClass = '.item5';
  if(i==5) sClass = '.item6';
  /* Если все .item содержат вконце число равное выбранному option, то можно упростить условие выше.
  sClass = '.item'+i; // отсчёт с 0
  sClass = '.item'+(i+1); // отсчёт с 1
  */
  // Удаляем класс active со всех .block
  $('.block.active').removeClass('active');
  // Ну и добавляем к .block и .item'n ↑ класс .active
  $('.block'+sClass).addClass('active');
});
.block {display: inline-block; float: left; width: 50px; height: 50px; line-height: 50px; text-align: center; background: green; margin-right: 5px;}
.block.item3,
.block.item6 {line-height: 15px; padding: 10px 0; box-sizing: border-box;}
.block.active {background: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="customProductData[359][56]" class="vm-chzn-select">
	<option value="3398">1,5 спальный</option>
	<option value="3399">2 спальный</option>
	<option value="3400">2 спальный с ЕВРО простыней</option>
	<option value="3401">Евро</option>
	<option value="3402">Семейный</option>
	<option value="3403">Семейный 4</option>
</select>
<br><br>
<div class="item1 block">1,5</div>
<div class="item2 block">2</div>
<div class="item3 block">2 (euro)</div>
<div class="item4 block">euro</div>
<div class="item5 block">family</div>
<div class="item6 block">family 4</div>

Думаю комментарии к коду ясны, если нет, то не стесняйтесь, спрашивайте в комментах.


Почитав комментария к другому ответу.

$('.vm-chzn-select').bind('change', function(){
  let i = $(this).val(); // Получаем выбранный
  i = $(this).find('option[value="'+i+'"]').index(); // Получаем позицию выбранного option
  
  // Удаляем класс active с активного .kit
  $('.kits .kit.active').removeClass('active');
  // Ну и добавляем к .kit с индексом выбранного option класс .active
  $('.kits .kit').eq(i).addClass('active');
});
.kit.active {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="customProductData[359][56]" class="vm-chzn-select">
	<option value="3398">1,5 спальный</option>
	<option value="3399">2 спальный</option>
	<option value="3400">2 спальный с ЕВРО простыней</option>
	<option value="3401">Евро</option>
	<option value="3402">Семейный</option>
	<option value="3403">Семейный 4</option>
</select>

<div class="kits">
  <div class="kit">В комплект "1,5 спальный" входит:</div>
  <div class="kit">В комплект "2 спальный" входит:</div>
  <div class="kit">В комплект "2 спальный с ЕВРО простыней" входит:</div>
  <div class="kit">В комплект "Евро" входит:</div>
  <div class="kit">В комплект "Семейный" входит:</div>
  <div class="kit">В комплект "Семейный 4" входит:</div>
</div>

В качестве "комплектаций" можете использовать "блоки "спойлеры"", или "вкладки (табы)"

4
  • спасибо больше . я поставил код на сайт но не работает почему то 7 фев 2019 в 20:15
  • @ЭлвинАлиев, мой код написан как пример, он не настроен под ваш сайт и желания - естественно, скопировав его как есть, он и не заработает.
    – De.Minov
    7 фев 2019 в 20:19
  • на другом сайте работает а тут нет, конфликт что ли 7 фев 2019 в 20:31
  • @ЭлвинАлиев, конфликты и их много - скриншот, но они все с другими скриптами, из-за чего мой не работает.
    – De.Minov
    7 фев 2019 в 21:08
0

jQuery('.vm-chzn-select').on('change', function() {
      console.log('any actions')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

4
  • я прописал на сайте ,не чего не происходит 7 фев 2019 в 18:35
  • Что собственно должно происходить, можно подробнее? У какого блока доллжен менять класс, и на какой класс? 7 фев 2019 в 18:36
  • matras-strong.ru/catalog/postelnoe-bele/… нужно по концу что бы как тут было если выбрать из списка нужный размер и нажать Что входит в комплект? то снизу открывается описание для выбранного размера 7 фев 2019 в 18:37
  • как тут, что именно? свиду, или о чем ричеь идет?не ясно ничего 7 фев 2019 в 18:39

Ваш ответ

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

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