layui之select回显选中

傷城~ 2022-04-13 13:26 1749阅读 0赞

想实现select回显选中，研究了半个小时，不是专业的前端出身，但是现在都是自己搞，看看效果吧：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]

点击“编辑”，回显选中的“锁具”：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70 1]

在来看看代码，ajax请求后台数据，渲染select标签数据：

$.ajax({
            url:'/goodsCategory/parentGoodsCategoryList',
            dataType:'json',
            async: true,
            success:function(data){
                $("#parentId").html("<option value='0'>根目录</option>");
                $.each(data,function(index,item){
                    if(!parentId){
                        var option = new Option(item.goodsCategoryName,item.id);
                    }else {
                        var option = new Option(item.goodsCategoryName,item.id);
                        // // 如果是之前的parentId则设置选中
                        if(item.id == parentId) {
                            option.setAttribute("selected",'true');
                        }
                    }
                    }
                    $('#parentId').append(option);//往下拉菜单里添加元素
                    form.render('select'); //这个很重要
                })
            }
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]: /images/20220413/5f509f6f91dd4c5386adc91d9846d8e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70 1]: /images/20220413/c87242fc45884dbc81755ab0beaf5e29.png