如何確定選定的數據列表選項

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>