layui当点击文本框时弹出选择框,显示选择内容的例子

实现如图所示的功能

实现步骤：

1.html页面需要注意的内容

1)、表

div id=' hidden 1 ' lay-filter=' hidden 1 ' style=' display : none ' table id=' department _ result ' lay-filter=' department _ result '/table/div 2)、弹出部门表格中的按钮

！-添加弹出部门表格的工具（里面的按钮)脚本类型=' text/html ' id=' hidden 1-table-tool ' a class=' layui-BTN layui-BTN-xs ' lay-event=' select '选择/a/script2.js实现

1)、全局设置

//定义全局变量雇员. js .中要用到var $，管理员，表，层，放置日期，表单；var context _ path='/layui-curve '；拉威。config({ base : context _ path '/layui admin/' }).扩展({ index : 'lib/index'}).使用([ 'table '，' layer '，' laydate '，' form' ]，function() { //part 1:为全局变量赋值$=layui .$，admin=layui.admin，table=layui.table，layer=layui.layer，laydate=layui.laydate，form=layui.form//第2:部分让获得渲染页面桌子。渲染(department _ result _ table _ options)；//渲染页面上的桌子。桌子中的数据是通过创建交互式、快速动态网页应用的网页开发技术请求从后台获取//第3:部分让获得为页面的元素绑定事件处理函数桌子。on(' tool(department _ result)'，department _ tool _ event _ handler)；//为页面上的桌子上的工具绑定事件处理函数//第4:部分为输入框绑定光标聚焦事件的触发该函数，$('#dname ').焦点(exit _ input _ focus _ handler)；});2)、表渲染

//页面上隐藏的用于弹层的所有客户的列表的相关设置var department _ result _ table _ options={ elem : ' # department _ result '，URL : context _ path '/API/department '，方法： 'get '，响应： { statusName : 'code '，statusCode : 200，msgName : 'msg '，countName : 'count '，dataName : 'data' }，title : '部门列表，cols : [{ field : ' deptno '，title : '部门编号，宽度： 100},{字段： 'dname '，标题： '部门名称，宽度： 150 },{字段： 'loc '，标题： '所在地，宽度： 150 },{固定： '右侧，标题： '操作，工具栏： ' # hidden 1-工作台-工具'，宽度： 80 }]};3)、客户点击时弹出弹层

//"客户"输入框的光标聚焦事件的触发函数，弹出弹层，弹层上显示所有的客户，以供选择函数exit _ input _ focus _ handler(){ layer。open({ type : 1，area : [ '600px '，' 450px' ]，content : $('#hidden1 ')，success : function () { //重新加载表格中的数据桌子。重新加载(' department _ result '，department _ result _ table _ options)；$('#hidden1 ').css('display '，' block ')；} });}4)、客户点击选择按钮时数据回填

//点击弹出的"客户信息"弹层上的表格中"选中"按钮的触发函数职能部门_工具_事件_处理程序(obj){控制台。信息(obj)；定义变量数据=obj.dataswitch(obj。事件){ case ' select ' : $(' # dname ').val(数据。dname)；层。关闭(层。索引)；打破；}}3.后台代码实现略

以上这篇获得当点击文本框时弹出选择框，显示选择内容的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。