选择列表显示键而不是值

Question

我有一个很烂的现象，我现在卡住了，因为我不知道错误来自哪里。我希望外面有人可以帮助我。

我的代码是这样的：

<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
   <option value="DUMMY1">0</option>
   <option value="s">24</option>
   <option value="d">25</option>
</datalist>

我的问题是显示数据列表。如果我单击箭头，那么我只会得到如下所示的数字：

例如选择'25'之后，我得到的值是'd'。没错，但是我不想显示数字。相反，我想在此下拉字段中显示此数据列表的值。

如果我做这样的事情：

<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
    <option value="DUMMY1">DUMMY1</option>
    <option value="s">s</option>
    <option value="d">d</option>
 </datalist>

我自然会得到正确的显示，但是我想添加ID，以便可以将click事件与所选ID而不是标签绑定。

希望有人可以帮助我。

Answer 1

您可以利用data属性来查找列表中单击的选项的ID，并将值保留为标签，

请参见下面的代码

$(function(){
  $('#selectClassInput').on('change', function(e){
     var val = $(this).val();
     var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
     console.log(id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
   <option value="DUMMY1" data-id="0">DUMMY1</option>
   <option value="s"  data-id="24">s</option>
   <option value="d" data-id="25">d</option>
</datalist>