登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

layui ajax设置select选项,并设置默认显示值

页面标签

<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>

原文出处:http://malaoshi.top/show_1IX26cXd1JGO.html