dataList属性及应用

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