Wie erhalte ich den ID-Wert in der Datenliste, um die Werte zu ändern?

Question

Hier benutze ich data-list, bangalore ist standardmäßig ausgewählt, so dass ich den ID-Wert bekommen kann, aber wenn ich Werte ändere, kann ich keine ID-Werte bekommen, wie der Benutzer will, dass ich bangalore ändere nimm den Wert, wie geht das?

var city_id = $('#cities option[value="' + $('#cityName').val() + '"]').data('id'); 
 
\t \t 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>

Legen Sie es auf Änderungsereignis

Answer 2

Sie für eine Onchange Veranstaltung mit jQuery .change hören:

Das Änderungsereignis wird an ein Element gesendet, wenn sich dessen Wert ändert. Diese Veranstaltung ist beschränkt auf <input> Elemente, <textarea> Boxen und <select> Elemente.

$("#cityName").change(function() { 
 
    var city_id = $('#cities option[value="' + $('#cityName').val() + '"]').data('id'); 
 
    alert(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 3

einfach das JS Teil unten statt von Ihnen verwendet werden. diese sould den Trick :)

$(document).ready(function(){ 
    function getCityID() { 
     var city_id = $('#cities option[value="' + $('#cityName').val() + '"]').data('id'); 
     console.log(city_id); 
    } 
    $("#cityName").on("change", getCityID); 
    getCityID(); 
}); 

---

Dieser Teil auf Änderung ausführt: $("#cityName").on("change", getCityID);

Und das auf Last (initialisieren): getCityID();

Arbeits Geige: https://jsfiddle.net/3rb4h468/