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

Question

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

<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 示例？ 甚至有可能吗？ 我有想法，也许有办法使用数据属性，但我不知道它是否真的解决了我的问题（以及如何......）

请帮忙。

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

Answer 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>