H5下拉搜索框-layui
2022/8/2 23:24:09
本文主要是介绍H5下拉搜索框-layui,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
实现效果:
可实现下拉选择及搜索提示效果!使用layui前端框架。
一下为实现代码:
首先引入layui的JS和CSS:
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://www.layuicdn.com/layui/layui.js"></script>
HTML:
<div class="layui-form-item" style="border-bottom:1px solid #009688;padding: 20px 10px;"> <div class="layui-inline layui-form" style="width:240px;margin-right: 0;"> <select name="modules" lay-verify="required" lay-search="" id="test_user" lay-filter="test_user"> <option value="" selected>选择或输入...</option> <option value="010">北京</option> <option value="021">上海(禁用效果)</option> <option value="0571">杭州</option> </select> </div> </div>
js:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script> <script> layui.use('form', function () { form = layui.form;//必须执行这一步才会触发效果 //监听提交 form.on('submit(formDemo)', function (data) { layer.msg(JSON.stringify(data.field)); return false; }); //渲染下拉搜索框 $.post('{:U("api/.../...")}', {}, function (data) { if (data.success) { var data = data.data; var len = data.length; var sel = '' for (var i = 0; i < len; i++) { sel += '<option value="' + data[i].id + '" >' + data[i].nickname + '</option>' } $('#test_user').append(sel); form.render(); //更新全部 } }); //调用ajax返回数据并渲染下拉框 $.ajax({ type: "get", url: "../../xx", data: { "": "" }, success: function (dq) { var jsonq = JSON.parse(dq); console.log(jsonq) if (jsonq.length > 0) { //第一种: var data = jsonq; var len = jsonq.length; var sel = '' for (var i = 0; i < len; i++) { sel += '<option value="' + data[i]["产品名称"] + '" >' + data[i]["产品名称"] + '</option>' } $('#test_user').append(sel); form.render(); //第二种 for (var i = 0; i < jsonq.length; i++) { var obj = document.getElementById('test_user'); obj.options.add(new Option(jsonq[i]["产品名称"], jsonq[i]["产品名称"])); } if (jsonq.length == 1) { setSelectChecked("test_user", jsonq[0]["产品名称"]); } } } }) //监听下拉框 form.on('select(test_user)', function (data) { var txt = $("#test_user option:selected").text();//获取select选中的值 $('.test_user').html(txt); }); //监听下拉框-方法 onchange="gradeChange()" function gradeChange() {//下拉框选中事件 var objS = document.getElementById("test_user"); var grade = objS.options[objS.selectedIndex].value;//获取选中值 alert(grade) } }) </script>
这篇关于H5下拉搜索框-layui的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-0601-电商商品中心解密:仅凭SKU真的足够吗?
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能