select2动态选项创建

博主遇到select下拉框无所需值时需动态创建的需求,通过查阅文档,使用jquery插件select2解决。将select2的tags设为true即可实现,同时提到动态创建的下拉框高度会改变,自行修改高度即可。

今天遇到一个需求,select下拉框中若没有要选择的值,则动态创建一个,查阅了很多文档终于有了解决办法
这里用到了一个jquery插件select2,网上查就可以找到
只要把select2的tags设为true就可以了,看代码

$(".js-example-tags").select2({
  tags: true
});

原本下拉搜索找不到会提示 no results found
在这里插入图片描述
动态创建效果如图
在这里插入图片描述
在这里插入图片描述

:动态创建的select2下拉框的高度会发生改变,主要是.select2-selection–single属性高度被强制改变。自己修改高度即可。如下

<style type="text/css">
    .select2-container .select2-selection--single{  
      height:34px;  
      line-height: 34px;  
    }  
</style>

是不是很赞

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值