javascript - How to determine selected datalist option
问题描述
Is there way to determite, which option from datalist was selected? I mean when I have duplicite names in datalist, see example below:
<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>
It is part of weather app, and in some countries, there are cities with same name (but different location) - so how I can distinguih if user have clicked on first or second Olo in example? Is it even possible? I have idea, that maybe is there way to use data attribute, but I dont know if it actually solve my problem (and how...)
Please help.
EDIT: I understand, that it is for user little bit uncomfortable to actually "don't know" which city they are selecting in datalist, but unfortunatelly I have no way to "help" them (I have only database with city names and longitude and latitude of it). So after selection of city I include link to google maps (for that location) to displaying part
解决方案
您应该更改城市名称中选项的值国家。当用户点击列表时
<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>
推荐阅读
- python - 并排生成箱线图以比较两个数据框
- vue.js - vuejs3 - 多次使用一个组件
- javascript - 在我的网站上填写表格后,如何将数据发送到特定的电子邮件地址?
- javascript - PHP+JS 表单 - 提交后将页面 URL 粘贴到电子邮件表单中
- arrays - 10 个数字的平均值 - C 中的数组
- javascript - 这个灯塔审计有什么问题?我可以从 http://localhost 安装 PWA
- java - 如何获取用户节点内选定用户的用户 ID?
- azure - 如果提供了 DelimitedTextConfiguration,则无法使用查询 Blob 内容 API 查询 Azure Blob 存储
- r - 使用 ggraph 在二分网络中指定节点形状和标签
- javascript - 使用javascript将wmf转换为png