Bootrap3 slelet 下拉多选 配合TP5怎么实现

曾在项目中遇到过几次，无奈之前太懒没有保存代码的习惯以至于每次都重写，今天记录一下，做个了断。

直接上代码

• 首先引入bootrap3 文件资源

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>

• 编写Select 样式

 <div style="display: inline-block;width: 200px;" id="ooxx">
            <select class="selectpicker form-control form-control" id="approverq"  style="width: 200px;"  multiple data-max-options="100" >
                <foreach name="channel_list" item="vo">
                    <option value="{$vo.channel}">{$vo.channel}</option>
                </foreach>
            </select>
        </div>

这里为了方便直接在最外层的div设置一个id

问题

这里表单提交的时候，select 只会上传一个定值过来

解决

添加一个隐藏域

表单的submit 添加一个onclick方法处理选中的option

### 添加隐藏域
<input type="hidden" id="hidden_channel" name="channel" value="{$channel}"/>
### 表单添加一个onclick 事件
<input type="submit" class="btn btn-primary" value="搜索" onclick="fun()"/>
 
### js代码如下
    function fun(){
        var str=[];
        var obj = document.getElementById("approverq");
        for(var i=0;i<obj.options.length;i++){
            if(obj.options[i].selected){
                str.push(obj.options[i].value);// 收集选中项
            }
        }
        #隐藏域赋值
        $("#hidden_channel").val(str);
    }

到此，表单就能够提交多值到后台了。

问题

后续页面刷新后，select 不会选中的option选项。这要如何解决呢？

解决

js在加载的时候处理

    $(function(){
        let str = "{$channel}"; # {$channel} 这个是后台传递过来的值。格式：xxxx,xxxxx,oooxxx
        var arr = str.split(',');# 字符串按逗号拆分成数组
 
        $('#approverq option').each(function (){  # 遍历option 
            if($.inArray($(this).val(), arr) !=-1){ # 当前的option 存在 arr中的话给选中状态
                $(this).attr("selected",true)
            }
        })
    });

完美解决！！！！

__EOF__

本文作者：Blizzard
本文链接：https://www.cnblogs.com/obeigong/p/16455455.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！