如何传递id属性而不是值

How to pass the id attribute instead of the value

本文关键字：属性 何传递 id      更新时间：2023-09-26

我对HTML5数据列表很陌生，我注意到value部分与标记中的文本一起显示。但我不想显示"id"属性中的值，所以我将其作为另一种存储方法放入"id"标记中。因此：

   <td> 
    <input list="to" id="to-selected" style="width: 145px;">
    <datalist id="to"> 
    <option value="4000 Islands, Laos" id="4483"></option>
    </datalist>
   </td>

如果这是可能的，我将如何检索id属性的值？（如果我得到值，我知道如何发布）

一个可能的选项是使用输入事件并手动设置值

$('#to-selected').on('input', function() {
  $(this).val($(this).next().find('option[value="' + this.value + '"]').data('id'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="to" id="to-selected" style="width: 145px;" />
<datalist id="to">
  <option value="4000 Islands, Laos" data-id="4483"></option>
</datalist>

如果你不想显示它，你可以将它隐藏起来，并像往常一样检索值

<input type=hidden id="something" value="4483"/>

或

<input type=text id="something" value="4483" hidden/>

要使用查询获取任何属性，请使用.attr('attributeName'):

$('datalist').attr('id');

如果使用data-*（如<input data-id="5"/>），则可以使用

$('input').data('id');

请记住，如果使用js更改data-*值，则不会将任何更改反映到DOM元素，只会反映到内存中的数据集。

您只需使用attr事件

$('#to').on('input', function() {
  $(this).val($(this).next().find('option[value="' + this.value + '"]').attr('id'))
})
相关文章：