How to frame a click the value data-attribute from a block to another block?

For example there is a div and a drop-down list of cities
<div id="city"><img src="img/flag-m.png" /> Moscow</div>
the <ul>
<li data-city="Krasnoyarsk" data-gerb="/img/flag.png">Krasnoyarsk</li>
<li data-city="Kazan" data-gerb="/img/flag.png">Kazan</li>
<li data-city="Sochi" data-gerb="/img/flag.png">Sochi</li>
</ul>

As from the drop-down list when you click on a city to substitute values data-city data-gerb down the city
in
<div id="city"><img src="img/flag-m.png" /> Moscow</div>
March 12th 20 at 07:56
1 answer
March 12th 20 at 07:58
Solution
Wrap the name of the city in a span, so:

<div id="city">
 <img src="img/flag-m.png" />
<span>Moscow</span>
</div>

The substitution itself of the values:

$('ul').on('click', 'li', function(e) {
 const data = $(this).data();
$('#city')
 .find('img').attr('src', data.gerb).end()
.find('span').text(data.city);
});
Super was all very easy) Thank you very much) - Shea commented on March 12th 20 at 08:01

Find more questions by tags jQuery