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

问题描述

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

<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属性，但是我不知道它是否真的解决了我的问题（以及解决方法...）

请帮助。

编辑： 我了解，对于用户而言，实际上“不知道”他们在数据列表中选择的城市有点不舒服，但是不幸的是，我无法“帮助”他们（我只有具有城市名称，经度和纬度的数据库的）。因此，在选择城市后，我会包含指向该位置的Google地图（用于该位置）的链接

解决方法

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

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