如何确定选定的数据列表选项答案

【问题标题】：How to determine selected datalist option如何确定选定的数据列表选项
【发布时间】：2021-01-26 17:57:42
【问题描述】：

有没有办法确定选择了 datalist 中的哪个选项？我的意思是当我在 datalist 中有重复的名称时，请参见下面的示例：

<input type="text" list="cities" id="search-bar" name="city" value="" autocomplete="off" placeholder="type city">
<datalist id="cities">
        <option value="Olo (PT)" data-city-index="0"></option>
        <option value="Olo (PT)" data-city-index="1"></option>
        <option value="Olonets" data-city-index="2"></option>
        <option value="Olot" data-city-index="3"></option>
</datalist>

它是天气应用程序的一部分，在某些国家/地区，有些城市名称相同（但位置不同） - 那么我如何区分用户是否点击了第一个或第二个 Olo？甚至可能吗？我有想法，也许有办法使用数据属性，但我不知道它是否真的解决了我的问题（以及如何......）

请帮忙。

编辑：我知道，实际上“不知道”他们在数据列表中选择了哪个城市，这让用户有点不舒服，但不幸的是我无法“帮助”他们（我只有城市名称和经度和纬度的数据库其中）。因此，在选择城市后，我将链接到谷歌地图（该位置）以显示部分

【问题讨论】：

看起来，除了程序问题，还有一个更大的用户体验问题；用户如何知道该选择哪一个？
我明白，这让用户有点不舒服，但不幸的是我没有办法“帮助”他们。因此，在选择城市后，我将链接到谷歌地图（针对该位置）以显示部分......
我建议使用该城市条目的独特之处作为data- 属性。例如，如果 lat/long 是唯一的，您可以将 data-latitude="" 和 data-longitude="" 添加到元素中。不会修复 UX，但至少您已经准备好创建链接的坐标（无需额外查找）。但是索引也很好。
但是你知道吗，如何在输入事件中获取所选选项的 data-* 属性？因为这是我不知道的，如何获得……
嗯...看起来不太好：Get selected value of datalist option value using javascript

标签： javascript events html-input html-datalist

【解决方案1】：

您应该更改城市名称中选项的值国家。当用户点击列表时

<input type="text" list="cities" id="search-bar" name="city" value="" autocomplete="off" placeholder="type city">
<datalist id="cities">
        <option value="city1 (PT)" data-city-index="0"></option>
        <option value="city2 (PT)" data-city-index="1"></option>
        <option value="city3" data-city-index="2"></option>
        <option value="city4" data-city-index="3"></option>
</datalist>

【讨论】：

我不能简单地重命名现有城市......而且添加数字看起来真的很奇怪和丑陋......