layer ui 动态生成select提交表单的坑

为什么80%的码农都做不了架构师？>>>   

<div class="jays-tips jays-text">

<p>

新增后台管理员

</p>

</div>

<form class="layui-form" action="edit" method="post">

<div class="layui-form-item">

<label class="layui-form-label">用户名</label>

<div class="layui-input-block">

<div class="layui-input-inline">

<input type="text" name="username" required  lay-verify="username" placeholder="用户名" autocomplete="off" class="layui-input" id="username">

</div>

<div class="layui-form-mid layui-word-aux"></div>

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">角色</label>

<div class="layui-input-inline">

    <select name="pid" id="pid" lay-filter="pid" lay-verify="required" >

    <option >--请选择--</option>

    <?php foreach ($team_type as $k => $v){?>

    <option value="<?= $v['admin_role_id']?>"><?= $v['name']?></option>

    <?php }?>

    </select>

</div>

<div class="layui-input-inline" id="second">

<select name="positions" id="positions" lay-filter="positions" lay-verify="positions" >

<option value="0">--请选择--</option>

</select>

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">输入密码</label>

<div class="layui-input-inline">

<input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input" id="psaaword">

</div>

<div class="layui-form-mid layui-word-aux"></div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">确认密码</label>

<div class="layui-input-inline">

<input type="password" name="repassword" required lay-verify="repassword" placeholder="再次确认" autocomplete="off" class="layui-input" >

</div>

<div class="layui-form-mid layui-word-aux"></div>

</div>

<div class="layui-form-item">

<div class="layui-input-block">

<button class="layui-btn" lay-submit lay-filter="addSub">

立即提交

</button>

<button type="reset" class="layui-btn layui-btn-primary">

重置

</button>

</div>

</div>

</form>

 

下面是js

var role_id = 0;

$(document).ready(function(){

$('#second').on('click','dl dd',function(){

$('#second dl dd').removeClass('layui-this');

var me = $(this);

var show = me.text();

role_id = me.attr('lay-value');

me.addClass('layui-this');

$('#second input').val(show);

});

});

 

layui.use(['form', 'layedit', 'laydate'], function(){  

  var form = layui.form(),layer = layui.layer,layedit = layui.layedit;  

  //自定义验证规则  

  

  form.verify({  

        username: function(value){  

          if(value != ''&&value.length < 6){  

            return '请输入至少6位的用户名';  

          }else if(value == ''){

            return '请输入用户名';

          }

        },

        positions: function(){

          if(role_id == 0){

          return '请选择角色';

          }

        },

        password: function(value){  

          if(value.length < 6){  

            return '请输入至少6位的密码';  

          }

        },

        repassword: function(value){  

          if(value.length < 6){  

            return '请输入至少6位的密码';  

          }

          var pwd = $('input[name=password').val();

    if (pwd !== value) {

    return "二次输入的密码不一致！";

    }

        },

  });

  

form.on('select(pid)', function(data) {

var formUrl = "list";

var data = {pid: $('#pid option:selected').val()};

$.get(formUrl,data,function(data){

if(data.code == 1){

$('#second input').val('--请选择--');

$('#positions').html("<option value='0'>--请选择--</option>");

$('#positions').next('.layui-form-select').find('.layui-anim-upbit').html("<dd lay-value='0' class='layui-this'>--请选择--</dd>");

for(var i = 0;i < data.list.length;i++){

$('#positions').append($("<option value='" + data.list[i].admin_role_id + "'>" + data.list[i].name + "</option>"));

$('#positions').next('.layui-form-select').find('.layui-anim-upbit').append($("<dd lay-value='" + data.list[i].admin_role_id + "' >" + data.list[i].name + "</dd>"));

}

}else if(data.code == -1){

layer.alert('失败',{

skin: 'layui-layer-molv',

closeBtn: 0,

anim: 4,

icon: 5

});

}

},'json');

});

 

form.on('submit(addSub)', function(data) {

    var formUrl = "save";

    data.field.admin_role_id = role_id;

    $.ajax({

  type: "post",

url: formUrl,

async: true,

data: data.field,

dataType: "json",

success:function(data){

if(data.code == 1 ){

layer.alert(data.msg,{

skin: 'layui-layer-molv',

closeBtn: 0,

icon: 6,

anim: 4

});

setTimeout(function(){history.go(-1)},2000);

}else{

layer.alert(data.msg,{

skin: 'layui-layer-molv',

closeBtn: 0,

icon: 5,

anim: 4

});

}

},

error:function(){

layer.alert('错误',{

skin: 'layui-layer-molv',

closeBtn: 0,

icon: 5,

anim: 4

});

}

    });

    return false; 

});

}); 

 

转载于:https://my.oschina.net/af666/blog/838604