bootstrap下拉多选框(bootstrap-select)

前端用vue+bootstrap,需求是做可多选下拉框。

首先附上该插件的下载地址。

bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select

要使用该插件在引入jquery.js和bootstrap.js后还需要引入以上地址资源中的 bootstrap-select.min.css 和 bootstrap-select.min.js这两个文件。

<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-select.min.css" rel="stylesheet">

<script src="${request.contextPath}/statics/libs/bootstrap-select.min.js"></script>

html:

 <select id="rolese" title="请选择" class="form-control selectpicker"  v-model="xxx"  multiple data-live-search="true"

  </select>

js:

roleList:{},

roleIdList:[]

加载下拉框列表

 $.get(baseURL + "xxx/xxx/select", function(r){       
                vm.roleList = r.list;   
                for (var i = 0; i < vm.roleList.length; i++) {
                    $('#rolese').append("<option value=" + vm.roleList[i].roleId + ">" + vm.roleList[i].roleName + "</option>");
                }
                $('#rolese').selectpicker('refresh');
                $('#rolese').selectpicker('render');
             
              
            });

下拉多选框赋值:

                 $('#rolese').selectpicker('val', vm.user.roleIdList);
                $('#rolese').selectpicker('refresh');
                $('#rolese').selectpicker('render');

以上就实现了下拉框对选的功能。

问题:

<select id="rolese" title="请选择角色" class="form-control selectpicker"  v-model="user.xxxxList"  multiple data-live-search="true">
                           <option v-for="xxxxDict in xxxxList" v-bind:value="xxxx">
                                   {{ xxxxxxx }}
                              </option> 

                        </select>

这样写页面没有值,不知道有什么解决办法。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值