Question

我是HTML5数据专家的新手，我注意到值部分与标签内的文本一起显示。但我不想显示'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属性的值？（如果我得到价值，我知道如何发布）

Answer 1

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

$('#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>

Answer 2

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

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

或

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

Answer 3

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

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

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

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

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

Answer 4

您只需使用attr事件

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

如何传递id属性而不是值

4 个答案: