Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2020, 13:05
Аспирант
Отправить личное сообщение для emptyindorill Посмотреть профиль Найти все сообщения от emptyindorill
 
Регистрация: 16.02.2012
Сообщений: 73

Выбор активного элемента через селект
Добрый день!

Есть такая конструкция:
<div class="recomendation">
 <select id="" name="">
  <option selected="selected" value="01">1</option>
  <option value="02">02</option>
 </select>

 <div class="detail-use__tab" data-id="01" style="display:block;">01 info</div>
 <div class="detail-use__tab" data-id="02">02 info</div>
</div>


Надо что бы при выборе определенной опции, выводился блок у которого dat-id совпадает с value опции.

Пробую так:
$(document).ready(function() {
	$('.recomendation select').change(function(){
		var el = $(this).val();
			  $('.detail-use__tab').css('display','none');
			  $('.detail-use__tab'+el).css('display','block');
			
	});
});


Подскажите пожалуйста, как это правильно сделать? Делаю первый раз, надо ли в var указывать значения?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2020, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

emptyindorill,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .detail-use__tab  {
      display: none;
  }
  .detail-use__tab.show  {
      display: block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
	$('.recomendation select').change(function(){
		$('[data-id]').each((i, elem) => {
        elem.classList.toggle('show', elem.dataset.id == this.value)
		})

	});
});

  </script>
</head>
<body>
<div class="recomendation">
 <select id="" name="">
  <option selected="selected" value="01">1</option>
  <option value="02">02</option>
 </select>

 <div class="detail-use__tab show" data-id="01">01 info</div>
 <div class="detail-use__tab" data-id="02">02 info</div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2020, 14:19
Аспирант
Отправить личное сообщение для emptyindorill Посмотреть профиль Найти все сообщения от emptyindorill
 
Регистрация: 16.02.2012
Сообщений: 73



Спасибо большое!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Элемент select. Выбор элемента в списке nayldock Элементы интерфейса 3 06.01.2015 18:40
Последовательный выбор в селект боксах Art!P jQuery 2 04.08.2014 15:29
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58
Как менять позицию элемента? Заданую через position:absolute; left:100px; top:200px; aRpi Общие вопросы Javascript 3 24.04.2011 08:42
Передача полю объекта - массиву, значения элемента через set метод poorking Общие вопросы Javascript 1 13.02.2011 20:22