如何从数据列表中获取值 id 并显示标题？答案

【问题标题】：How to get the value id from datalist and display title?如何从数据列表中获取值 id 并显示标题？
【发布时间】：2018-12-30 12:15:59
【问题描述】：

如何从datalist中获取值id并显示title？

<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>

【问题讨论】：

你的桌子是什么样子的？以及您想要展示什么以及如何展示？

标签： php mysql datalist

【解决方案1】：

在名为 data-id 的选项中创建一个自定义属性，您可以在 jquery 的帮助下获取 id。让下面的代码。

<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>

【讨论】：