bootstrap的select2既可以查询又可以输入

最新推荐文章于 2025-07-11 13:32:47 发布

原创最新推荐文章于 2025-07-11 13:32:47 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#select2 bootstrap

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何利用Select2插件实现自定义标签选择功能，并通过示例代码展示了如何将其集成到表单中，同时确保触发onchange事件时能够正确地处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先关键一句话：

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

别小看此代码功能可谓强大，在需要的地方直接加进去class如下代码所示：

<div class="form-group required">
              <label class="control-label  col-sm-4">测试select2: </label>
              <div class="col-sm-8">
             <form:select path="sett"
               id="sett" class="form-control required js-example-tags"
             onchange="onchange('${sett.costAmount}','${sett.id}');">
            <form:option value='' label='请选择' />"
             <form:options    items="${fns:findSettList()}"
              itemLabel="label" itemValue="value" htmlEscape="false" />
              </form:select>
               </div>
        </div>

注意上面代码有一个onchange方法需把

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

加到此方法里面。不然无法实现。