Select2使用实例

1、List<Product> ProductList = ViewBag.ProductList as List<Product>;

2、样式

  <link href="~/Content/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" />

  <link href="~/Content/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" />

3、html 

<select tabindex="1" style="width:360px;" id="ProductIDs" name="ProductIDs" multiple="multiple">
@foreach (var item in ProductList)
{
<option value="@item.ProductID">
@item.ShortName
</option>
}
</select>

4、js引入及脚本

<script src="~/Content/assets/global/plugins/select2/js/select2.full.js"></script>
<script src="~/Content/assets/global/plugins/select2/js/select2.min.js"></script>

 $(function () {
            $("select").select2();
            var ProductIDs = new Array(@string.Join(",",m.ProductIDs));//绑定数据
            if (ProductIDs.length > 0) {
                $("#ProductIDs").select2(‘val‘, ProductIDs);
            }
}
var dataValues = jQuery("#thisForm").serialize();//序列化
/

5、对象字段接收

class{public List<int> ProductIDs {get;set;}}

时间: 2024-11-09 03:45:27

Select2使用实例的相关文章

Select2使用实例——很好用的下拉提示选择框!

这几天一直的寻找能把select和sugget结合起来使用的例子,然后就看到了这个,发现真的很不错,它支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 官方网站:https://select2.github.io/ 1.首先需要引入如下文件 <link href="select2.min.css" rel="stylesheet" /> <script type="text/javascript" sr

自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)

最终效果 首先我们要有一个基础的文本框 <input name="test" type="hidden" id="userSelect" style="width: 600px" value="上海^漳州" /> 使用本地数据的写法 $('#userSelect').select2({ placeholder : "请输入", minimumInputLength : 1,

JQuery 学习总结及实例 !! (转载)

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

select2 如何自定义提示信息

select2使用 ; select2 placeholder ; select2 搜索框 ; select2 改造 最近项目中使用到了select2来美化和丰富下拉框的功能,这款插件功能丰富,使用简单,可以对已经生成的select标签进行改造,也可以对json数据直接生成下拉列表,包括一些检索功能,异步加载功能等,能够很大程度的满足视觉和交互的要求.是开发过程中不可多得的一款利器. 官方文档是英文文档且是以问答形式展示他的可配置项的,可能作者会觉得这样做比较有趣,但是对于渣渣英语的我来说,肯定

select2 api参数的文档

具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数量的字符 maximumInputLength int 最大数量的字符 minimumResultsForSearch Int 最小数量的结果 maximumSelectionSize int 可选择的最大条目数 placeholder 字符串 选择初始值 separator 字符串 分隔符字符或字符串用来划定id allowClear

select2 如何自定义提示信息-布布扣-bubuko.com

最近项目中使用到了select2来美化和丰富下拉框的功能,这款插件功能丰富,使用简单,可以对已经生成的select标签进行改造,也可以对json数据直接生成下拉列表,包括一些检索功能,异步加载功能等,能够很大程度的满足视觉和交互的要求.是开发过程中不可多得的一款利器. 官方文档是英文文档且是以问答形式展示他的可配置项的,可能作者会觉得这样做比较有趣,但是对于渣渣英语的我来说,肯定是一种煎熬, 现在和大家分享一下在开发过程中的一些问题: 一.使用篇 1.根据官方文档的提示配置了placeholde

下拉框、下拉控件之Select2。自动补全的使用

参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com/wangchuanqi/p/5981212.html 参考三:https://www.cnblogs.com/sharpest/p/6117043.html 官网:https://select2.org/ 1.使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络).

solr分布式索引【实战一、分片配置读取:工具类configUtil.java,读取配置代码片段,配置实例】

1 private static Properties prop = new Properties(); 2 3 private static String confFilePath = "conf" + File.separator + "config.properties";// 配置文件目录 4 static { 5 // 加载properties 6 InputStream is = null; 7 InputStreamReader isr = null;