jsp使用datalist标签写可查询可输入下拉框样式
- jsp使用datalist标签写可查询可输入下拉框样式。
- 需求
- 用法
jsp使用datalist标签写可查询可输入下拉框样式。
需求
jsp页面实现可选择,可查询,可输入的下拉选择框,
- 一段废话 本来想用select看看有什么属性可以实现,但基本上接触的都是选择下拉的样式,没有可输入,可搜索的功能,其实如果用vue的话很方便,element组件真的yyds,但是项目用jsp,只能另想它法,无意看到datalist标签,发现真的很nice,完全符合需求,中间用的时候有点曲折,在这里记录下来；
用法
<label for="countys" class="col-xs-1 control-label">区/县</label><div class="col-xs-3"><input id="countys" type="text" name="countys" list="countyList" class="form-control mark_sel"><datalist id="countyList" name="countyList" ></datalist></div>
<script type="text/javascript">$.ajax({type: "post/get",url: XXXXXX',contentType: "charset=utf-8;",data: JSON.stringify(json),success: function(data){var depts = data.data;$("#countyList").empty();$("#countys").attr("placeholder","---请选择---");for(var i=0; i<depts.length; i++){var dept = depts[i];var dept_name = dept["name"];var dept_pid = dept["code"];$("#countyList").append("<option value='"+dept_name+"' data-id='"+dept_pid+"'></option>");}})
</script>
这里有个 data-id 这个属性是我加的,因为业务需要,我要存接口中的两个字段值,一个name ,一个code,name的话 就是在页面中选项展示的值,code是实际操作的值,我在另一个接口需要获取选中的code值,
因为这里datalist标签value值就是展示在前端页面的值,所以只能将name存到value中,data-id存的是我需要操作的值,
在我的理解中,datalist标签是将选中的value值赋值给相应的input标签中去,然后页面中实际上展示的是input输入框的value值,所以我们基本上能获取的也就是input的value值 name属性,
如何获取datalist中的data-id值?
$('#countys').change(function () {alert( $('#countyList option[value='+ this.value +']').attr('data-id'))})
实际上只需要这一行代码就可以了 哈哈哈哈, 这个我放在了datalist的change方法中 ,其实挺简单的,但是datalist真的好用.
