select2使用demo

最新推荐文章于 2025-07-10 09:47:55 发布

原创最新推荐文章于 2025-07-10 09:47:55 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在网页中使用Select2组件实现多选下拉框功能，包括引入必要的JS和CSS文件、编写HTML结构以及通过JavaScript设置已选项。

1.引入select2相关JS CSS

<script src="__PUBLIC__/Admin/js/select2.min.js"></script>
<link href="__PUBLIC__/Admin/css/select2.min.css" rel="stylesheet" />

2.在需要的HTML页面写入如下代码

<select id="cate_id" class="mul-select" multiple="multiple" name="cate_id[]" style="width:700px;">
         
             <option value="1" pid="{$v.pid}">选项一</option>
<pre name="code" class="html">             <option value="2" pid="{$v.pid}">选项二</option>

             <option value="3" pid="{$v.pid}">选项三</option>

</select>

3.调用JS，如果是编辑类页面，自动选择已选项，在最有启动函数

<span style="font-size:14px;">         //商品分类
	var cate_id = ['1','4','666'];//json类型
	  if(cate_id!=""){   
            $.each(cate_id, function(i,val){
                $("#cate_id").find("option[value='"+val+"']").attr("selected","selected");
            });
	 }
	$(".mul-select").select2();</span>