js动态刷新数据，更新到div上

最新推荐文章于 2025-05-30 09:03:50 发布

原创最新推荐文章于 2025-05-30 09:03:50 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用双重volist进行数据更新的方法，并通过JavaScript实现了动态获取数据的功能。示例中展示了如何利用HTML和PHP生成动态复选框列表，并通过AJAX请求更新这些列表的内容。

双重volist数据更新，html如下

<div class="checkbox-title">菜品选择</div>

<div  id="foodsDiv" class="layui-form-item checkbox-box">
    {volist name="foodList" id="vo" key='k'}
        <div class="checkbox-div0">
            <div class="checkbox-title1">{$vo.typeName}</div>
             <div class="checkbox-div">
             {volist name="vo.foodList" id="vo1" key='k1'}
                 <div class="checkbox-item" >
                    <input type="checkbox" name="select{$vo1.id}" value="{$vo1.id}" title="{$vo1.name}" <?php if($vo1['isSelect']) : ?>
                    checked
                  <?php endif; ?>>
                 </div>
             {/volist}
             </div>
        </div>
    {/volist}
</div>

js动态获取数据

layui.use('form', function(){
    var form = layui.form;
    form.on('select(demo2)', function(data){
        if(data.value!='请选择代理商'){
            $.ajax({
                url:"{:url('food/getFoods2AdminId0')}",
                data:{adminId:data.value},
                type:'post',
                async: false,
                success:function(data) {
                    var html = "";
                    if(data!=0){
                        $('#foodsDiv').empty();
                        html += "<div id='foodsDiv' class='layui-form-item checkbox-box'>"
                        for (var i = 0; i < data.length; i++) {
                            html += "<div class='checkbox-div0'>"
                            html += "<div class='checkbox-title1'>"+data[i].typeName+"</div>";
                            html += "<div class='checkbox-div'>";
                            for (var j = 0; j < data[i]['foodList'].length; j++) {
                                html += "<div class='checkbox-item'>";
                                html += "<input type='checkbox' name='select{'"+data[i]['foodList'][j].id+"} value="+data[i]['foodList'][j].id+"} title="+data[i]['foodList'][j].name+"></div>";
                            }
                            html += "</div></div>";
                        }
                        html += "</div>";
                        $("#foodsDiv").html(html);
                    }else{
                        $('#foodsDiv').empty();
                    }
                    form.render();
                }
            })
        }else{
            $('#foodsDiv').empty();
        }
    });
});