select2组件是一款代搜索功能的html下拉框辅助组件，官方 demo以及文档：http://select2.github.io/examples.html

=》

最简单的使用方法（前期绑定数据）：

1.在html页面上新建select控件。该select控件可以由asp.net DropDownList控件生成，也可以自己写html，也可以mvc 生成  @Html.DropDownListFor(t => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

 <select name="ddlSelect2Demo" id="ddlSelect2Demo" style="width:100px;">

     <option value="1">江苏</option>

     <option value="2">安徽</option>

     <option value="3">上海</option>

     <option value="4">北京</option>

     <option value="5">浙江</option>

 </select>

2.页面引入selec2组件（vs环境下建议使用nuget），包含：select2.min.css、select2.min.js。依赖jquery 1.7以上版本需提前准备

3.在页面加载完毕后使用js 调用select2初始化配置select组件

 <script type="text/javascript">

         $(document).ready(function () {

             InitSelect2();

         });

         function InitSelect2() {

             $("#ddlSelect2Demo").select2();

         }

     </script>

完整demo（asp.net webForm方式）

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select2Demo.aspx.cs" Inherits="WebApp_Select2Demo.Select2Demo" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>Select2Demo</title>

     <%--1.nuget引入select2前端组件包--%>

     <link href="Content/css/select2.min.css" rel="stylesheet" />

     <script src="Scripts/jquery-1.8.2.min.js"></script>

     <script src="Scripts/select2.min.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             InitSelect2();

         });

         function InitSelect2() {

             $("#ddlSelect2Demo").select2();

         }

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         筛选下拉框：

         <asp:DropDownList ID="ddlSelect2Demo" runat="server" Width="100px"></asp:DropDownList>

     </div>

     </form>

 </body>

 </html>
 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.UI;

 using System.Web.UI.WebControls;

 namespace WebApp_Select2Demo

 {

     public partial class Select2Demo : System.Web.UI.Page

     {

         protected void Page_Load(object sender, EventArgs e)

         {

             ddlSelect2Demo.Items.AddRange(new ListItem[]

             {

                 new ListItem("江苏","1"),

                 new ListItem("安徽","2"),

                 new ListItem("上海","3"),

                 new ListItem("北京","4"),

                 new ListItem("浙江","5"),

                 new ListItem("广东","6"),

                 new ListItem("西藏","7"),

                 new ListItem("云南","8"),

                 new ListItem("山东","6"),

                 new ListItem("青海","7"),

                 new ListItem("新疆","8"),

             });

         }

     }

 }

.net mvc方式也差不多：

在后端Controller写select数据源：ViewBag.Users = new List<SelectListItem>{　　/*下拉框数据*/};

前端绑定数据源：@Html.DropDownListFor(t => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

1.在下拉数据量小于1000以下，直接List绑定到select控件，非常简单

2.下拉数据量巨大，>5000情况下，要么用ajax远程json动态读取方法，要么仍用方法1但是总List缓存（根据需求每1h或者每天）

其他注意点：

1.务必加载$("#id").select2()

2.tags：false（默认）不需添加。若为了true将把新增的name作为id传入后端（所以id类型为string）

下面一段为复杂配置，支持远程ajax、并且对结果进行处理

//初始化页面上的所有select2组件

function InitSelect2() {

    $(".goodsNames").select2({

        ajax: {

            //url: "https://api.github.com/search/repositories",

            url: "../Goods/GetGoodsInfoByLikeName",

            dataType: 'json',

            delay: 500,

            data: function (params) {

                return {

                    q: params.term,

                };

            },

            processResults: function (data) {

                return { results: data };

            },

            cache: true

        },

        escapeMarkup: function (markup) { return markup; },

        minimumInputLength: 1,

        templateResult: formatRepo,

        templateSelection: formatRepoSelection,

        tags: (!IsOutWarehouse())  //true：允许用户输入新事物名，入库或入库同时出库；false：仅允许选中已有的事物、不需输入新的，出库

    });

}

//卸载页面上的所有select2组件

function DestroySelect2() {

    $(".goodsNames").select2('destroy');

}

//select2搜索结果下拉框操作回调

function formatRepo(repo) {

    if (repo != null && repo != undefined) {

        //可获取到接口的其他属性：Quantity等

        if (repo.id == repo.text) {

            if (IsPositiveFloat(repo.id)) {

                return "";  //禁止事物名为纯数字，防止后端混淆

            } else {

                return repo.text + "（新）";

            }

        } else {

            return repo.text;

        }

    }

}

//select2选中结果操作回调

function formatRepoSelection(repo) {

    var selectElemName = repo.element.parentNode.name;

    if (IsOutWarehouse()) {   //出库不许新增，所以不会出现此情况

        if (repo.Quantity <= 0) {

            alert("该事务库存为0，无法出库。请及时采购");

            //TODO:BUG  体验很不好

            //$("select[name='" + selectElemName + "']").val("");

            $("select[name='" + selectElemName + "']").select2().val(null).trigger("change");

            return "";

        }

    } else {

        if (IsPositiveFloat(repo.id)) {

            return "";  //禁止事物名为纯数字，防止后端混淆

        } else {

            return repo.text + "（新）";

        }

    }

    //事务存在，则赋值

    if (repo.Quantity != undefined) {

        var id = GetIdByElemName(selectElemName);

        $("select[name='WarehouseInOutDetails[" + id + "].GoodsIdOrNameStr']").attr("data-goodsid", repo.id);

        $("input[name='WarehouseInOutDetails[" + id + "].Quantity']").attr("data-stock-num", repo.Quantity);

        $("select[name='WarehouseInOutDetails[" + id + "].UnitId']").val(repo.UnitId);

        $("select[name='WarehouseInOutDetails[" + id + "].TypeId']").val(repo.TypeId);

    }

    return repo.text;

}

建议：

1.不要动态加减select控件并绑定select2，会很复杂又bug。即使调用销毁方法也难搞

2.不建议tags，难控制。因为会将name作为id传给后端，比如若用户输入222,后端难以判断222是已存在的id:222呢还是新增的name：222

3.在直接绑定的情况下，allowClear：true  属性会产生X但是点击无效、无法清除。具体原因未知，只能通过绑定时在option里新增一个val=0的无效值、用户选中后、后端再判断该值无效、忽略查询。ajax情况下没问题。

4.若使用ajax来做，当表单处于编辑时就要显示之前新建的下拉框。这时默认不行、必须在此select下增加单个option，<option value="@Model.SupplierId">@Model.SupplierName </option>

selec2组件使用方法的更多相关文章

  1. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  2. WPF中实例化Com组件，调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常

    WPF中实例化Com组件,调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常 在wpf中封装Com组件时,调用组件 ...

  3. 查看 activex 组件的方法

    查看 activex 组件的方法 可以使用的工具COMRaider 直接安装 并选择对应的类型即可查看相关的信息,比OLE/COM Object Viewer 简洁方便. 具体的操作如下: 随意选择一 ...

  4. 解决 window server2008 r2 没有注册Ofiice组件的方法

    解决 window server2008  r2 没有注册Ofiice组件的方法   .NET下在用Microsoft.Office.Interop.Excel及word 操作Excel和Word时, ...

  5. VC中调用COM组件的方法（转载）

    原文参考:http://hi.baidu.com/mingyueye/item/53ebecd44da76917d80e4449 总结一下在VC中调用COM组件的方法 准备及条件: COM服务器为进程 ...

  6. Unity3D 获得GameObject组件的方法

    Unity3D 获得GameObject组件的方法有几种,这里进行说明一下: 组件: 要获得这些组件,进行操作的话,绑定一个Movescipt 的C#组件,里面的获取方法为 void Update ( ...

  7. vc中调用Com组件的方法详解

    vc中调用Com组件的方法详解 转载自:网络,来源未知,如有知晓者请告知我.需求:1.创建myCom.dll,该COM只有一个组件,两个接口:   IGetRes--方法Hello(),   IGet ...

  8. 在javascript中使用com组件的方法

    转载自:  http://dhailin.blog.163.com/blog/static/230738322011128102043880/ 首先创建一个COM组件,插入一个双接口Itest,在此接 ...

  9. 在JS中使用COM组件的方法

    首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数 { // TODO: 在此添加实现代码 ...

随机推荐

  1. 译: 2. RabbitMQ Spring AMQP 之 Work Queues

    在上一篇博文中,我们写了程序来发送和接受消息从一个队列中. 在这篇博文中我们将创建一个工作队列,用于在多个工作人员之间分配耗时的任务. Work Queues 工作队列(又称:任务队列)背后的主要思想 ...

  2. Atitit php vs node.js attilax总结

    Atitit php vs node.js attilax总结 1.1. 上手度  还是php 1 1.2. Node.js最大的缺点  异步回调导致可读性差..特别嵌套的时候.. 1 1.1. 上手 ...

  3. 将自己写的HDL代码封装成带AXI总线的IP

    将自己写的HDL代码封装成带AXI总线的IP 1.Tools->create and package IP 2.create AXI4总线的IP 3.新建block design 4.点击右键, ...

  4. C#学习笔记（33）——批量修改word标题

    说明(2017-12-22 11:20:44): 1. 因为数学脚本的主标题和副标题没有格式,目录导航里不显示,修改的时候不好定位,所以需要改成下图格式: 2. 问题的难点有两个,一个是word的操作 ...

  5. 【GMT43智能液晶模块】例程二：串口通信实验

    实验原理: GMT43智能液晶模块的串口包括USB_UART(CH340),TTL,RS-232,RS-485/ RS-422等四部分,USB_UART部分通过CH340芯片与STM32F429的US ...

  6. 【emWin】例程三十一：窗口对象——Multipage

    简介: ULTIPAGE 类似于笔记本中的分隔卡或文件柜中的标签.通过使用MULTIPAGE 小工具,应用程序可为窗口或对话框的相同区域定义多个页面.每个页面包含特定 类型的信息或用户选择相应页面时应 ...

  7. Maven手动安装jar包到仓库

    mvn install:install-file -Dfile=C:\Users\Administrator\Desktop\IKAnalyzer6.5.0.jar -DgroupId=com.luc ...

  8. ref和引用类型传参的区别

    引用类型对象本身不改变,只改变对象的属性时,我们在操作同一个对象:(类似c++指针指向的地址) 如果连对象本身都可能会改变,又要保证在操作同一个对象,就用ref传引用类型的对象吧!(类似c++指向一个 ...

  9. Javascript 检测键盘按键

    Javascript中 有3个事件句柄在对应键盘的输入状态:keydown.keypress和keyup. 分别对应的意思是:按键被按下(按下按键但还没有抬起).点击按键(按下并抬起按键).按键抬起( ...

  10. 记一次 Spring 事务配置踩坑记

    记一次 Spring 事务配置踩坑记 问题描述:(SpringBoot + MyBatisPlus) 业务逻辑伪代码如下.理论上,插入数据 t1 后,xxService.getXxx() 方法的查询条 ...