select联动初始化数据form.render();不能逐个渲染的问题。

未结贴
11 1123
就是遇到了一个很尴尬的问题能不能求个解惑。
三级联动。 现在有三个select框, 当ajax后台拿到数据后dom添加给第一个select后不会显示数据, 需要用form.render();渲染一下, 解决完后了,第一个select框的form.on(selcet())方法是选中值后会加载第二个select框的内容,当第二个选择框加载完后又不会显示数据 又要调用一下form.render. 问题就出在这里了,这时候会连同第一个select一起重新渲染, 如何才能只单个渲染select框, 能告知一下吗
  • HEarTache_psR HEarTache_psR
    2017-03-21 10:49:20
    这里跟大家说声抱歉, 可能卤煮半夜战斗太晚, 写错了一个id选择器迟迟未发现, 重新翻看一遍的时候找到了BUG。 原因是因为数据加载到了 同个select下。 form.render();函数二次加载不冲突。 卤煮贴下代码分享一下, 如果很烂请勿喷。
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 10:50:29
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>平台官方推送</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/global.css" media="all">
    </head>
    <body>
    <div class="container" style="width: 70%;">
    <div style="margin: 15px;">
    <span class="layui-breadcrumb">
    <a>推送管理</a>
    <a><cite>平台官方推送</cite></a>
    </span>
    </div>

    <form class="layui-form">
    <div class="layui-form" style="margin: 17px;">
    <div class="layui-form-item">
    <div class="layui-inline">
    <select name="provinceId" lay-verify="" lay-filter="province" id="province">
    <option value="">所属省份</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="cityId" lay-verify="" lay-filter="city" id="city">
    <option value="">所属城市</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="schoolId" lay-verify="">
    <option value="">请选择学校</option>
    <option value="010">湖北</option>
    <option value="021">湖南</option>
    <option value="0571">广东</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="grade" lay-verify="">
    <option value="">请选择入学时间</option>
    <option value="010">湖北</option>
    <option value="021">湖南</option>
    <option value="0571">广东</option>
    </select>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-inline" style="width: 75%">
    <input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-inline" style="width: 75%">
    <input type="text" name="url" required="" lay-verify="required" placeholder="请输入链接" autocomplete="off" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <input type="file" name="picture" class="layui-upload-file">
    </div>
    <div class="layui-inline">
    <p style="color: #D2D2D2">选取的图片尺寸大于100*50,大小应小于30M。<p>
    <p style="color: #D2D2D2">只能上传1张</p>
    </div>
    </div>

    <div class="layui-form-item">
    <textarea id="content" style="display: none;"></textarea>
    </div>
    </div>

    <div style="margin-left:43%;margin-bottom: 30px;">
    <button class="layui-btn layui-btn-big" lay-submit lay-filter="up">提交</button>
    </div>
    </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/layui/layui.js"></script>
    <script type="text/javascript" src="js/com.js"></script>
    <script>
    function getProvinceData(data){
    console.log(data);
    console.log(form.render("select"));
    var data = JSON.parse(JSON.stringify(data));
    var dom = '<option value="">所属省份</option>';
    for(var i = 0; i < data.regions.length; i++){
    dom += '<option value='+data.regions[i].regionId+'>'+data.regions[i].regionName+'</option>'
    }
    $('#province').html(dom);
    form.render('select');
    }

    function getCityData(data){
    var data = JSON.parse(JSON.stringify(data));
    var dom = '<option value="">所属城市</option>';
    for(var i = 0; i < data.regions.length; i++){
    dom += '<option value='+data.regions[i].regionId+'>'+data.regions[i].regionName+'</option>'
    }
    $('#city').html(dom);
    form.render('select');
    }
    </script>
    <script>
    var form;
    layui.use(['layedit','form','upload'], function(){
    var layedit = layui.layedit;
    var index = layedit.build('content'); //建立编辑器
    form = layui.form();
    //获取地区
    var pro = {
    parentId : 0
    }
    postRemote("user/tagServlet.do?flag=getRegionList3_0_1",pro,getProvinceData);
    // var active = {
    // content: function(){
    // alert(layedit.getContent(index)); //获取编辑器内容
    // }
    // ,text: function(){
    // alert(layedit.getText(index)); //获取编辑器纯文本内容
    // }
    // ,selection: function(){
    // alert(layedit.getSelection(index));
    // }
    // };



    //监听提交
    form.on('submit(up)', function(data){
    //文本框内容
    var arr = {
    content : layedit.getText(index)
    }

    //组合提交全部数据
    var postData = $.extend( true, arr, data.field);
    layer.msg(JSON.stringify(data.field))
    return false;
    });

    //提交省份id,获取县级
    form.on('select(province)', function(data){
    var postProData = {
    parentId : data.value
    }
    postRemote("user/tagServlet.do?flag=getRegionList3_0_1",postProData,getCityData);
    });

    layui.upload({
    url: '上传接口url'
    ,success: function(res){
    console.log(res); //上传成功返回值,必须为json格式
    }
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • 颠三倒四 颠三倒四
    2017-03-21 10:58:42
    你这代码看得好累,你贴进代码里,然后截图看看效果嘛
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 10:59:36
    function postRemote(posturl, formdata, callbackFun, cbParameter) {
    $.ajaxSetup({
    async: true
    });
    posturl = remoteUrl + posturl;
    $.ajax({
    type: "POST", // 请求方式
    url: posturl, // 请求url地址
    data: formdata,
    dataType: "json", // 数据返回类型
    success: function (data) {
    // 请求发送成功后执行的函数,data是返回的数据。cbParameter是传递给回调函数的参数
    if (cbParameter == null || cbParameter == "") {
    doCallback(callbackFun, [data]);
    } else {
    doCallback(callbackFun, [data, cbParameter]);
    }
    },
    timeout: 10000, // 超时设置,如果10秒内请求无响应,则执行error定义的方法
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    //alert(XMLHttpRequest.status);
    //alert(XMLHttpRequest.readyState);
    //alert(textStatus);
    },
    async: true,
    traditional: true
    });
    }


    //调用回调函数
    function doCallback(fn, args) {
    fn.apply(this, args);
    }
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 11:06:26
    @颠三倒四 嗯哼, 截图要截几次 代码不长, 如果想看话直接粘进ide里面就好了。 问题自己解决了, 只是分享出来看下 。 而且截图不方便拿代码。
    0 回复
  • 颠三倒四 颠三倒四
    2017-03-21 11:35:13
    截图,说的是你UI显示出来的效果。

    代码就直接贴到</>代码里
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 12:15:32
    @颠三倒四 抱歉 理解错了 OK 。
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 12:16:11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>平台官方推送</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/global.css" media="all">
    </head>
    <body>
    <div class="container" style="width: 70%;">
    <div style="margin: 15px;">
    <span class="layui-breadcrumb">
    <a>推送管理</a>
    <a><cite>平台官方推送</cite></a>
    </span>
    </div>

    <form class="layui-form">
    <div class="layui-form" style="margin: 17px;">
    <div class="layui-form-item">
    <div class="layui-inline">
    <select name="provinceId" lay-verify="" lay-filter="province" id="province">
    <option value="">所属省份</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="cityId" lay-verify="" lay-filter="city" id="city">
    <option value="">所属城市</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="schoolId" lay-verify="">
    <option value="">请选择学校</option>
    <option value="010">湖北</option>
    <option value="021">湖南</option>
    <option value="0571">广东</option>
    </select>
    </div>

    <div class="layui-inline">
    <select name="grade" lay-verify="">
    <option value="">请选择入学时间</option>
    <option value="010">湖北</option>
    <option value="021">湖南</option>
    <option value="0571">广东</option>
    </select>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-inline" style="width: 75%">
    <input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-inline" style="width: 75%">
    <input type="text" name="url" required="" lay-verify="required" placeholder="请输入链接" autocomplete="off" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <input type="file" name="picturePost" class="layui-upload-file">
    </div>
    <div class="layui-inline">
    <p style="color: #D2D2D2" id="showstatus">选取的图片尺寸大于100*50,大小应小于512K。<p>
    <p style="color: #D2D2D2" id="showsize">只能上传1张</p>
    </div>
    </div>

    <div class="layui-form-item">
    <textarea id="content" style="display: none;"></textarea>
    </div>
    </div>

    <div style="margin-left:43%;margin-bottom: 30px;">
    <button class="layui-btn layui-btn-big" lay-submit lay-filter="up">提交</button>
    </div>
    </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/layui/layui.js"></script>
    <script type="text/javascript" src="js/com.js"></script>
    <script>
    function getProvinceData(data,form){
    var form = form;
    var data = JSON.parse(JSON.stringify(data));
    var dom = '<option value="">所属省份</option>';
    for(var i = 0; i < data.regions.length; i++){
    dom += '<option value='+data.regions[i].regionId+'>'+data.regions[i].regionName+'</option>'
    }
    $('#province').html(dom);
    form.render('select');
    }

    function getCityData(data,form){
    var form = form;
    var data = JSON.parse(JSON.stringify(data));
    var dom = '<option value="">所属城市</option>';
    for(var i = 0; i < data.regions.length; i++){
    dom += '<option value='+data.regions[i].regionId+'>'+data.regions[i].regionName+'</option>'
    }
    $('#city').html(dom);
    form.render('select');
    }
    </script>
    <script>
    layui.use(['layedit','form','upload'], function(){
    var layedit = layui.layedit;
    var index = layedit.build('content'); //建立编辑器
    var form = layui.form();
    //获取地区
    var pro = {
    parentId : 0
    }
    postRemote("user/tagServlet.do?flag=getRegionList3_0_1",pro,getProvinceData,form);
    // var active = {
    // content: function(){
    // alert(layedit.getContent(index)); //获取编辑器内容
    // }
    // ,text: function(){
    // alert(layedit.getText(index)); //获取编辑器纯文本内容
    // }
    // ,selection: function(){
    // alert(layedit.getSelection(index));
    // }
    // };



    //监听提交
    form.on('submit(up)', function(data){
    //文本框内容
    var arr = {
    content : layedit.getText(index)

    }

    //组合提交全部数据
    var postData = $.extend( true, arr, data.field);
    layer.msg(JSON.stringify(data.field))
    return false;
    });

    //提交省份id,获取县级
    form.on('select(province)', function(data){
    var postProData = {
    parentId : data.value
    }
    postRemote("user/tagServlet.do?flag=getRegionList3_0_1",postProData,getCityData,form);
    });

    layui.upload({
    url: remoteUrl + 'platform/dataServlet.do?flag=uploadPicture'
    ,ext: 'jpg|png|jpeg|bmp'
    ,success: function(res){
    console.log(res); //上传成功返回值,必须为json格式
    var res = JSON.parse(JSON.stringify(res));
    if(res.statusCode==0){
    $('#showstatus').html('上传成功').css('color','green');
    $('#showsize').html(res.msg).css('color','green');
    }
    if(res.statusCode==1){
    $('#showstatus').html('上传失败').css('color','red');
    $('#showsize').html(res.msg).css('color','red');
    }
    if(res.statusCode==2){
    $('#showstatus').html('文件过大').css('color','red');
    $('#showsize').html(res.msg).css('color','red');
    }
    }
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 12:16:41
    function postRemote(posturl, formdata, callbackFun, cbParameter) {
    $.ajaxSetup({
    async: true
    });
    posturl = remoteUrl + posturl;
    $.ajax({
    type: "POST", // 请求方式
    url: posturl, // 请求url地址
    data: formdata,
    dataType: "json", // 数据返回类型
    success: function (data) {
    // 请求发送成功后执行的函数,data是返回的数据。cbParameter是传递给回调函数的参数
    if (cbParameter == null || cbParameter == "") {
    doCallback(callbackFun, [data]);
    } else {
    doCallback(callbackFun, [data, cbParameter]);
    }
    },
    timeout: 10000, // 超时设置,如果10秒内请求无响应,则执行error定义的方法
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    //alert(XMLHttpRequest.status);
    //alert(XMLHttpRequest.readyState);
    //alert(textStatus);
    },
    async: true,
    traditional: true
    });
    }


    //调用回调函数
    function doCallback(fn, args) {
    fn.apply(this, args);
    }
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 12:17:30
    0 回复
  • HEarTache_psR HEarTache_psR
    2017-03-21 12:17:48
    @颠三倒四 好了。
    0 回复
近期热议
新版本只是短暂搁置,并非放弃 46
用layer弹出层没有效果为什么? 20
关于图片上传时 一直提示 “请对上传接口返回JSON字符” 14
等待Layui2.0的发布 13
layPage渲染失败 13
寻求高手做 PHP网站定制,PHP二次开发 前端,后端,功能 13
某些人,请自觉。。。 12
怎么修改 导航栏,选项卡等等的 颜色? 11
lay tab 怎么设置第一个不带关闭 其他的带关闭按钮 9
select选项选择后不能选取默认的请选择选项 9