For notes only: HTML5 datalist uses jquery to quickly get selected elements

Note that getting the datalist is still a lot of use to traverse the options in the datalist to get the elements of the selected item (DOM). If the number of items is large, the efficiency will be slower. If the page references jquery, you can directly use the jquery selection To quickly get the selected item element. But there is a premise, that is, a certain attribute value of all option must be unique and cannot be repeated. Otherwise, all corresponding options will be returned.
Example: An input box has been bound A datalist has been set, and now I want to display the title of the selected item in the datalist in the change event pop-up dialog box.
HTML:

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

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

Effect:
Insert picture description here
Test timing of positioning from 6 192 options:
traversal: 3 680ms
jquery selector: 38ms

Guess you like

Origin blog.csdn.net/qq_35977139/article/details/102801402