如何防止val在HTML输入（组合框）中显示

Question

我有一个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（值）吗？我该怎么做才能隐藏价值？我只希望将每部电影的标题显示给用户。

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>

Answer 1

将此collections.Counter更改为from collections import Counter total = Counter(inv) + Counter(dragonLoot) for k,v in total.items(): print(v, k) print('Total number of items: %s' % sum(total.values()))

45 gold coin
1 rope
1 ruby
1 dagger
Total number of items: 48

$("<option/>").val(m.id).text(m.title)

您要同时添加ID和文本，仅添加文本

或者您可以这样做，使用$("<option/>").val(m.title) Html标记这将更相关，因为它也有ID，但仅在下拉列表中显示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.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>

select

Answer 2

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

所以我的答案是：你不能！

Firefox根本不显示ID：

MS Edge也不：

以及MS IE：

Answer 3

替换为

$("<option/>").val(m.id).text(m.title).appendTo("#movies");

收件人

$("#movies").append('<option val='+m.id+'>'+m.title+'</option>')

上面的代码行将根据需要工作