0%

HTML5 datalist 使用jquery快速获取选中项元素

注意到获取datalist目前仍然比较多的使用遍历datalist里面的option来获取选中项的元素(DOM). 如果项目数量比较多的时候效率会比较慢. 如果页面引用的有jquery的话可以直接使用jquery的选择器来快速获取选中项元素. 但是有一个前提, 就是所有option 的某个属性值一定是唯一的, 不能出现重复. 否则将会把全部对应选项都返回出来.

范例: 已经给一个input输入 框绑定了一个datalist, 现希望在change事件弹出对话框显示datalist选中项的标题.

HTML:

1
2
3
4
5
6
7
<input id="type" list="dataList" />
<datalist id="dataList"> <!-- 此范例value属性值必须唯一 -->
<option value="id_1">选项1</option>
<option value="id_2">选项2</option>
<option value="id_3">选项3</option>
<option value="id_4">选项4</option>
</datalist>

JS:

1
2
3
$("#type").change(function() {
alert($("#dataList option[value=" + this.value + "]").text());
})

效果:

在这里插入图片描述

测试从6 192个选项中定位的计时:

遍历: 3 680ms

jquery选择器: 38ms

隐藏
推进创文常态化 共建文明襄阳城 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 做文明襄阳人 建文明襄阳城 凝聚文明正能量 筑梦千年古襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 创建全国文明城市 加快建设汉江流域中心城市 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 讲文明 树新风 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 用微笑融化陌生 用文明美化襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 争当文明使者 播撒文明新风