layui ajax设置select选项,并设置默认显示值 作者:马育民 • 2021-10-25 14:23 • 阅读:10203 页面标签 ``` <select name="materialType" lay-verify="required" lay-filter="materialType" id="materialType" lay-search> </select> ``` js代码 ``` <script> layui.use(['form', 'layer','jquery'], function() { $ = layui.jquery; var form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ price: function(value) { if (value.length==0) { return '请输入价格'; } if (value.length > 6) { return '价格不能超过10万'; } }, }); //监听提交 form.on('submit(modify)', function(data) { console.log(data); //发异步,把数据提交给php doSubmit(); return false; }); init(form); }); /* 为了让 select中的数据显示到页面上,以及让其选中相应的选项,都需要form对象参与 */ function init(form){ var id=getParam("id"); //发请求,获取select控件的选项 $.ajax({ url:'/materialquerytype', /*接口域名地址*/ type:'get', async:false,//异步 data: {}, success:function(res){ //console.log(res.data); if(res.code==0){ var list = res.data; var s = '<option value="-1">请选择类别</option>'; $.each(list, function (i, it) { s = s + '<option value="' + it.id + '">' + it.name + '</option>'; }); console.log("s::::"+s) $("#materialType").html(s); form.render('select');//渲染该控件----将数据显示到页面上 // form.render(); }else{ layer.alert(res.msg, {icon: 0,title: '提示'}) } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest); alert(textStatus); alert(errorThrown); } }) //发请求,获取当前回显的数据 $.ajax({ url:'/material/'+id, /*接口域名地址*/ type:'get', async:false, data: {}, success:function(res){ //console.log(res.data); if(res.code==0){ //给表单赋值 form.val("myform", { "id": res.data.id ,"price": res.data.purchase_price ,"materialType": res.data.type_2 //设置下拉控件选中 }); }else{ layer.alert(res.msg, {icon: 0,title: '提示'}) } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest); alert(textStatus); alert(errorThrown); } }) } </script> ``` 原文出处:/show_1IX26cXd1JGO.html