javascript - 如何防止在 Html 输入(组合框)中显示 val

我有一个 Html 输入(组合框)

<input id="lstMovie" list="movies" name="moviesearch" />
    <datalist id="movies">
</datalist>

为了填充数据，我使用 jQuery 如下:

for (var t = 0; t < movies.length; t++) {
    var m = movies[t];
    $("<option/>").val(m.getId()).text(m.getTitle())
    .appendTo("#movies");
}

最后，我有一个包含这些选项条目的组合框，每个选项的左侧都有 ID(作为 val() 传递)，右侧有标题(通过 text() 传递) .

当用户选择一个选项时，Id 会记录在控制台中。但我不想显示 id(值)？我能做些什么来隐藏值(value)？我只想向用户显示每部电影的标题。

enter image description here

movies = [
  {id: '1', title: 'One'},
  {id: '2', title: 'Two'},
  {id: '3', title: 'Three'},
  {id: '4', title: 'Four'},
]
for (var t = 0; t < movies.length; t++) {
    var m = movies[t];
    $("<option/>").val(m.id).text(m.title)
    .appendTo("#movies");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="lstMovie" list="movies" name="moviesearch" />
    <datalist id="movies">
</datalist>

最佳答案

通常我会说，它是 Shadow DOM 的一部分。但在这种情况下，我无法为此找到任何可访问的 Shadow DOM(至少在 Chrome 中找不到)。

所以我的回答是:你不能!

Firefox 根本不显示 id:
Firefox