Select2的Tags使用技巧

Web前端 专栏收录该内容
6 篇文章 0 订阅

#Select2官网:可以在里面下载资源文件和进行样例参考

#https://select2.github.io/


#参考连接:

#https://segmentfault.com/a/1190000003795889

#http://blog.csdn.net/jiangeeq/article/details/52457351

#http://jingyan.baidu.com/article/59a015e35fb340f795886557.html

#http://stackoverflow.com/questions/12889309/get-selected-value-from-multi-value-select-boxes-by-jquery-select2


#需要引入的CSS和JS文件:

<link rel="stylesheet" href="<%=path%>/resources/bootstrap/css/bootstrap.css" >
<link rel="stylesheet" href="<%=path%>/resources/bootstrap/css/select2.min.css" >

<script src="<%=path%>/resources/bootstrap/js/select2.full.js"></script>
<script src="<%=path%>/resources/bootstrap/js/prettify.min.js"></script>
<script src="<%=path%>/resources/bootstrap/js/bootstrap.js"></script>


#实现被选中Item自动在下拉菜单中隐藏功能的CSS。

<style>

table td{word-break: keep-all;white-space:nowrap;}!important;
.select2-results__option[aria-selected=true] {
    display: false;
}
li[aria-selected=true] {
   display: none !important;
}
</style>


#html代码

<div id="USER_TAB" style="height:600px; width:1000px;">
<section id="tags" class="row">
    <div class="col-md-4">
        <p>
            <select id= "city" class="select2-results__option form-control" multiple="multiple">
              <option value = "ox" selected="selected">orange</option>
              <option value = "wx">white</option>
              <option value = "px" selected="selected">purple</option>
            </select>
        </p>
    </div>
</section>
</div>


<script>

#初始化,tags和multiple必须设置;data是新加的Option。Option中的Id就是Value。
 $("#city").select2({
    tags: true,
    multiple: true,
    data: [{id: 'sx', text: 'story'},{id: 'bx', text: 'bug'},{id: 'tx', text: 'task'}] //这里是在原来的基础上添加,而不是覆盖
});
 
 $("#city").on("select2:select",function(e){ #
console.log("select2:unselect", e.params.data.id); //新选择Option

e.params.data.disabled = true //让此元素之后不能被再选

console.log("select2:select text=", $("#city option:selected").text());  //获取所有选择Option的Text

console.log("select2:select text=", $(this).text()); //获取所有Option的Text
 
var element = e.params.data.element;
  var $element = $(element);
  element.hidden = true
   $element.detach();  //删除此元素,与remove()一样
   $(this).append($element);
   $(this).trigger("change");
});
 $("#city").on("select2:unselect",function(e){ //去除Option响应函数
var reslist=$(this).val();  //获取删除后的所有选中值系列

console.log("select2:unselect", e.params.data.id);获取被删除的Option的值
});
</script> 












  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

莫极

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值