Layui动态添加下拉选项值以及根据后台返回数据默认选中某项值的功能

迈不过友情╰ 2022-01-28 06:43 527阅读 0赞

最近项目遇到需要动态加载option选项后还要默认选中某项值的问题，折磨了几天终于试出了目前可以解决的方法。

两种方式各有优劣：

HTML：

ex-1：首先动态添加下拉框选项值，ajax异步解析后台接口数据这个比较简单：

然后加上对应的js方法：

//首先动态存储变量然后通过dom找到select被封装后的位置及元素来设置点击事件
    var currency = 'dd[lay-value=' + data.currency + ']'; 
    $('#currency').siblings("div.layui-form-select").find('dl').find(currency).click();

ex-2：append动态添加下拉框的选项然后来设置默认选中值：

$.ajax({
            url:'../接口',
            type:'get',
            dataType:'json',
            success:function(data){
                if(data.status==1){
                    $.each(data.data,function(index,item){   
                        //第一个参数是页面显示的值，第二个参数是传递到后台的值     
                        $('#currency').append(new Option(item.currencyZhName,item.currencyCode));//往下拉菜单里添加元素
                        //设置默认选中的value（这个值就可以是在更新的时候后台传递到前台的值）
    
                        //此时这个dynamicVal是后台动态要设置的默认值，可以先存变量然后再进行赋值
                        $('#currency').val(dynamicVal);
                        //如果是默认固定值可以直接再括号里填入要设置的数值，如$('#currency').val(1);
                    });              
                    form.render();
                }  
            }
        });

最后加上设置默认值的方法：

//在接口解析成功对应的状态值下将后台数据值赋值给上面的变量达到默认选中的效果
    dynamicVal=data.customsCode;

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70][]

--------------------

这两个方法都可以实现这个功能，但是第二种方式页面加载稍微有点慢，所以还待改进，希望大家有好的方法可以分享留下，欢迎评论贴码。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70]: /images/20220128/3cca09b7d7f743ee80dc40ac3c5825b6.png