Javascript-форум - Выбор активного элемента через селект

Добрый день!

Есть такая конструкция:

<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 указывать значения?

Спасибо!

<!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>