Как добавить текст из select в кнопку?

249

04 августа 2018, 16:10

Имеется кнопка добавление товара в корзину.

 <a data-id="" data-size="">В корзину</a>

И select

<select>
  <option value="" disabled selected>Не выбрано</option>
  <option value="1">38-XXS</option>
  <option value="2">40-XS</option>
  <option value="3">42-S</option>
</select>
<label>Выберите размер</label>

Как при выборе размера в select, чтобы он добавлялся в data-size="38-XXS"

Answer 1

Все работает! в атрибут добавляется! Обратите внимание заменил значения value у option.

$('.size').on('change', function(){ 
	$('#a').attr('data-size', $(this).val()); 
  alert($('#a').attr('data-size')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a id='a' data-id="" data-size="">В корзину</a> 
 <select class='size'> 
  <option value="" disabled selected>Не выбрано</option> 
  <option value="38-XXS">38-XXS</option> 
  <option value="40-XS">40-XS</option> 
  <option value="42-S">42-S</option> 
</select> 
<label>Выберите размер</label>

Answer 2

let select = document.querySelector('#targetSelect'); 
let dataSize = document.querySelector('#targetLink'); 
let strUser; 
 
select.addEventListener('click', e => { 
  strUser = e.target.options[e.target.selectedIndex].text; 
  console.log(strUser); 
  dataSize.setAttribute("data-size", strUser); 
});

<select id='targetSelect'> 
  <option value="" disabled selected>Не выбрано</option> 
  <option value="1">38-XXS</option> 
  <option value="2">40-XS</option> 
  <option value="3">42-S</option> 
</select> 
<label>Выберите размер</label> 
 
<a id='targetLink' data-id="" data-size="">В корзину</a>