AI智能
改变未来

layui xmSelect 实现下拉框工具栏

效果图如下:

源码如下,包含取值、赋值以及layui表单提交:

[code]<html><head><meta charset=\"utf-8\"><link href=\"~/Content/layui-v2.5.5/src/css/layui.css\" rel=\"stylesheet\" /><style>.layui-form-item {margin: 0px 0px 0px 0px;}</style></head><body><form class=\"layui-form\" action=\"\" lay-filter=\"SearchForm\"><div class=\"layui-form-item\"><label class=\"layui-form-label\">用户昵称:</label><div class=\"layui-input-block\"><div id=\"demo1\" style=\"width: 300px; margin: 20px;\"></div></div></div><div class=\"layui-form-item\"><div class=\"layui-input-block\" style=\"margin-left:130px\"><button type=\"button\" class=\"layui-btn layui-btn-normal\" id=\"btnSearch\" onclick=\"Search()\"><i class=\"layui-icon\"></i> Search</button><button type=\"reset\" class=\"layui-btn layui-btn-primary\"><i class=\"layui-icon\"></i> Reset</button></div></div></form><script src=\"~/js/bs-blue/js/jquery.min.js\"></script><script src=\"~/Content/layui-v2.5.5/layui/layui.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script src=\"~/Content/xm-select/dist/xm-select.js\"></script><script type=\"text/javascript\">var form;layui.use([\'form\'], function () {form = layui.form;});xmSelect.render({el: \"#demo1\",language: \'zn\',name: \"#demo1\",layVerify: \'required\',layVerType: \'msg\',filterable: true,searchTips: \'支持模糊搜索\',empty: \'暂无数据!\',toolbar: { show: true },data: [{ name: \'张三\', value: 1 },{ name: \'李四\', value: 2 },{ name: \'王五\', value: 3 },{ name: \'赵六\', value: 4 },{ name: \'小七\', value: 5 },]})//函数getValue(type), type类型 name, nameStr, value, valueStrfunction getValue() {demo1.getValue(\'value\');}//重置下拉选中项function reset() {demo1.setValue([])}function Search() {//获取页面表单所有元素JSON.stringify(form.val(\'SearchForm\'))}</script></body></html>

注:资源文件已上传资源文件已上传点击下载,免费哦。欢迎大家留言~

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » layui xmSelect 实现下拉框工具栏