侧边栏壁纸
博主头像
晓果冻博主等级

一个热爱生活的95后精神小伙

  • 累计撰写 131 篇文章
  • 累计创建 15 个标签
  • 累计收到 67 条评论

目 录CONTENT

文章目录

select2的使用

晓果冻
2020-09-16 / 0 评论 / 1 点赞 / 463 阅读 / 806 字
温馨提示:
本文最后更新于 2021-10-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

首先放上select2的官方文档链接:https://select2.org/

通过cdn引入select2所需要的库,或者下载到本地引入。

<select class="js-example-basic-single" multiple="multiple" name="state">
  <option value="AL">Alabama</option>
    ...
  <!--<option ng-repeat="xxx in list">{{xxx}}</option>-->
  <option value="WY">Wyoming</option>
</select>

你必须在其它地方能获取到这个select标签,所以要为其设置id、class或者是name以便能得到这个标签。multiple属性是是否可以多选。option是下拉框中多选的内容。例如在angluar中,使用ng-repeat循环出来值xxx,然后放在option中供select使用。

js块可以这样使用,如下图所示:

$(document).ready(function() {
    $('.js-example-basic-multiple').select2({
     data:[{name:"张三"},{name:"里斯"}]
     //json格式的数据,当然也可以通过ajax从后端获取数据
    });
});

我上面是用的是angluar,所以直接在controller中为list赋值了。

$scoper.list=[
"值1","值2"
]
//当然也可以使用ajax从后端动他获取数据
1

评论区