Как заполнить input текстом из li?

Question

[bone_games]

Здравствуйте есть input и ul li под ним, как заполнить input содержимым data-value или текстом из <a> по клику?

<input type="text" name="city" value="" id="input-city"  />
<ul>
<li data-value="Город 1"><a href="#">Город 1</a></li>
<li data-value="Город 2"><a href="#">Город 2</a></li>
<li data-value="Город 3"><a href="#">Город 3</a></li>
</ul>

Заранее всем спасибо

Answer 1

[Sashqa]

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).attr('data-value')
  $('input').val(text)
})

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).find('a').text();
  $('input').val(text)
})

Comments

[ettychel]

можно было повесить событие на ul, так меньше было бы слушателей, а в целом лаконично и верно
Свой способ представлю ниже

Answer 2

[tltary]

<input type="text" name="city" value="" id="input-city"  />
<ul>
  <li data-value="Город 1" class="js-item">
    <a href="#">Город 1</a>
  </li>
  <li data-value="Город 2" class="js-item">
    <a href="#">Город 2</a>
  </li>
  <li data-value="Город 3" class="js-item">
    <a href="#">Город 3</a>
  </li>
</ul>

const inp_city = document.querySelector('#input-city');
const li_item = document.querySelectorAll('.js-item');

for (let i = 0;i < li_item.length;i = i + 1) {
	li_item[i].addEventListener('click',function () {
  	inp_city.value = this.dataset.value;
  }, false)
}

https://jsfiddle.net/ruetz08q/14/

Comments

[tltary]

либо вот так

const inp_city = document.querySelector('#input-city');
const li_item = document.querySelectorAll('.js-item');

for (let i = 0;i < li_item.length;i = i + 1) {
	li_item[i].addEventListener('click', (e) => {
  	inp_city.value = e.currentTarget.dataset.value;
  }, false)
}

https://jsfiddle.net/qphjsvL9/

Answer 3

[Konstantin Zhikhor]

$('li').click(function(){
let valueLi = $(this).data('value');
$('#input-city').val(valueLi);
});

Answer 4

[Максим]

Моя первая попытка на нативном javascript

Answer 5

[ettychel]