大家好，欢迎来到IT知识分享网。
dataList作用：显示下拉列表，但是可以根据输入自动对数据进行排序和过滤。
1、value属性：
（1）value：在html效果中，value值与文本值同时会显示。
（2）data-value:value值会隐藏，只显示文本。
2、应用场景：隐藏value属性，显示text文本，输入栏显示选中的文本，数据传递时传递value。
code：
js部分：
function fun1(){ //alert($("#cname").val()); var input_select=$("#cname").val(); var option_length=$("option").length; for(var i=0;i<option_length;i++){ var option_value=$("option").eq(i).attr('data-value'); var optionT = $("option").eq(i).val(); if(input_select==optionT){ $("#courseId").val(option_value); break; } } //alert($("#courseId").val()); }
=====================================================================
html代码：
课程编号：<input type="text" name="courseName" id="cname" class="input01" onkeyup="fun1();" list="list1" autocomplete="off"> <input type="hidden" name="courseId" id="courseId"> <datalist id="list1" > <c:forEach items="${ac}" var="onec"> <option data-value="${onec.get("courserId")}">${onec.get("courserName")}</option> </c:forEach> </datalist>
解释：
（1）显示text值，隐藏value值：使用data-value属性。
（2）选中文本，传递value：html代码中，文本输入框下面添加隐藏栏<input type=”hidden”>。在js代码中动态设置隐藏栏的值。
参考博客：https://blog.csdn.net/qishuixian/article/details/78427951
补充：
new Option(“文本”,“值”,true,true)：后面两个true分别表示默认被选中和有效!
参考博客：
https://blog.csdn.net/fanfan_h/article/details/91450011?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/32031.html
