实现效果:
可实现下拉选择及搜索提示效果!使用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>