javascript - 如何在更改值时获取数据列表中的 id 值？

Question

这里我使用数据列表，类加罗尔是默认选择的，这样我就可以获取 id 值，但是当值发生更改时，我无法获取 id 值，就像假设用户想要更改类加罗尔那样，那时我想要取值，怎么办？

var city_id = $('#cities option[value="' + $('#cityName').val() + '"]').data('id');
	 	 console.log(city_id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input list="cities" value="Bangalore" class="form-control cities" name="cityName" id="cityName" style="border-radius:0px;height: 36px;">
<datalist id="cities">
<option data-id="1" value="Bangalore">
 <option data-id="2" value="Chennai">
<option data-id="3" value="Trichy">
</datalist>

Answer 1

$("#cityName").change(function() {

  var city_id = $('#cities option[value="' + $('#cityName').val() + '"]').data('id');
  console.log(city_id);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input list="cities" value="Bangalore" class="form-control cities" name="cityName" id="cityName" style="border-radius:0px;height: 36px;">
<datalist id="cities">
  <option data-id="1" value="Bangalore">
    <option data-id="2" value="Chennai">
      <option data-id="3" value="Trichy">
</datalist>

将其放在更改事件中