Как получить идентификатор значения из списка данных и показать заголовок?

Question

Как получить идентификатор значения из списка данных и отобразить заголовок?

<input list="A" name="states" class="form-control states" placeholder="Select your state ..">

<datalist id="A" >

<?php
    $sql_states = $DB_con->prepare("SELECT * FROM US_STATES ORDER BY ID ");
    $sql_states->execute();
    while($row_states=$sql_states->fetch(PDO::FETCH_ASSOC))
    {
    ?>
        <option  value="<?php echo $row_states['ID'].$row_states['STATE_NAME'];?>" ></option>
    <?php
    } 
?>
</datalist>

Answer 1

Создайте пользовательский атрибут в опциях data-id , и вы можете получить идентификатор с помощью jquery.позволяет следующий код.

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<input list="browsers" id="input">
<datalist id="browsers">
 <option data-id="op1" value="Internet Explorer">
 <option data-id="op2" value="Firefox">
 <option data-id="op3" value="Chrome">
 <option data-id="op4" value="Opera">
 <option data-id="op5" value="Safari">
</datalist>
<input type="text" id="selectedBrowser" />
<script type="text/javascript">
$(function(){
    $('#input').change(function(){
        var abc = $("#browsers option[value='" + $('#input').val() + "']").attr('data-id');
        $('#selectedBrowser').val(abc)
        alert(abc);
    });
});
</script>