bootstrap与Select2使用小结

这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。

组件的下载地址以及API说明地址：

1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/

2、Select2参数文档说明：https://select2.github.io/options.html

3、Select2源码：https://github.com/select2/select2

效果图：

HTML代码：

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<script src="/Content/jquery-3.1.1/jquery-3.1.1.min.js" type="text/javascript"></script>

<script src="/Content/bootstrap-3.3.0/js/bootstrap.min.js" type="text/javascript"></script>

<link href="/Content/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script src="/Content/Select2_4.0.3/dist/js/select2.full.min.js" type="text/javascript"></script>

<link href="/Content/Select2_4.0.3/dist/css/select2.min.css" rel="stylesheet" type="text/css" />

<script src="/Content/Select2_4.0.3/dist/js/i18n/zh-CN.js" type="text/javascript"></script>

<script src="/Content/jquery-placeholders-master/jquery.placeholders.min.js" type="text/javascript"></script>

@*<link href="http://select2.github.io/select2/bootstrap/css/bootstrap.css" rel="stylesheet"/>

<link href="http://select2.github.io/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="http://fanyi.youdao.com/web2/styles/all-packed.css?572877" type="text/css"/>

<script src="http://select2.github.io/js/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="http://select2.github.io/select2/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<link href="http://select2.github.io/select2-3.5.3/select2.css?ts=2015-08-29T20%3A09%3A48%2B00%3A00" rel="stylesheet"/>

<script src="http://select2.github.io/select2-3.5.3/select2.js?ts=2015-08-29T20%3A09%3A48%2B00%3A00" type="text/javascript"></script>*@

<script  type="text/javascript">

    $(document).ready(function () {

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

        //--------------------------------------

        $("#test_1").select2({

            language: "zh-CN",  //设置 提示语言

            width: "100%", //设置下拉框的宽度

            theme: "classic"

        });

        //------------------------------------------------------

        $("#test_2").select2({

            language: "zh-CN", //设置 提示语言

            width: "100%", //设置下拉框的宽度

            placeholder: "请选择",

            minimumInputLength: 10  //最小需要输入多少个字符才进行查询

        });

        //-------------------------------------------------------

        $("#test_3").select2({

            language: "zh-CN", //设置 提示语言

            width: "100%", //设置下拉框的宽度

            placeholder: "请选择",

            tags: true,

            maximumSelectionLength: 2  //设置最多可以选择多少项

        });

        //----------------------------------------------------

        $("#test_4").select2({

            language: "zh-CN", //设置 提示语言

            width: "100%", //设置下拉框的宽度

            placeholder: "请选择",

            allowClear: true,

            tags: true,

            maximumSelectionLength: 2,  //设置最多可以选择多少项

            templateResult: function (state) {

            if (!state.id) {

                 return state.text;

            }

             console.log(state.element.getAttribute("imgPath"));

             var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            },

            templateSelection: function (state) {

                if (!state.id) return state.text; // optgroup

                var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            }

        });

       //----------------------------------------------------------

        $("#test_5").select2({

            language: "zh-CN", //设置 提示语言

            width: "100%", //设置下拉框的宽度

            placeholder: "请选择",

             tags: true,

            maximumSelectionLength: 3,  //设置最多可以选择多少项

            templateResult: function (state) {

                if (!state.id) {

                    return state.text;

                }

                console.log(state.element.getAttribute("imgPath"));

                var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            },

            templateSelection: function (state) {

                if (!state.id) return state.text; // optgroup

                var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            }

        }).select2('val', ['HI', 'OR', 'NV']);

        //-------------------------------------------------------------------

        $("#test_6").select2({

            language: "zh-CN", //设置 提示语言

            width: "100%", //设置下拉框的宽度

            placeholder: "请选择",

            tags: true,

            maximumSelectionLength: 3,  //设置最多可以选择多少项

            templateResult: function (state) {

                if (!state.id) {

                    return state.text;

                }

                console.log(state.element.getAttribute("imgPath"));

                var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            },

            templateSelection: function (state) {

                if (!state.id) return state.text; // optgroup

                var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');

                return $state;

            }

        });

        //------------------------------------------------------------------

        $("#test_7").select2({

            ajax: {

                url: "Home/GetArea",

                dataType: 'json',

                delay: 250,

                data: function (params) {

                    return {

                        q: params.term, // search term

                        page: params.page

                    };

                },

                processResults: function (data, params) {

                    params.page = params.page || 1;

                    return {

                        results: data.items,

                        pagination: {

                            more: (params.page * 30) < data.total_count

                        }

                    };

                },

                cache: true

            },

            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work

            minimumInputLength: 1,

            language: "zh-CN", //设置 提示语言

            maximumSelectionLength: 3,  //设置最多可以选择多少项

            placeholder: "请选择",

            tags: false,  //设置必须存在的选项 才能选中

            templateResult: function (repo) { //搜索到结果返回后执行，可以控制下拉选项的样式

                console.log("====================templateResult开始==================");

                console.log(repo);

                console.log("====================templateResult结束==================");

                if (repo.loading) return repo.text;

                var markup = "<div class=''>" + repo.text + "</div>";

                return markup;

            },

            templateSelection: function (repo) {  //选中某一个选项是执行

                console.log("------------------templateSelection开始-------------------------------------");

                console.log( repo);

                console.log("------------------templateSelection结束-------------------------------------");

                return repo.full_name || repo.text;

            }

        });

        $("#btn").click(function() {

            alert($("#test_4").select2("val"));

        });

        //$("#test_5").prop("disabled", true);  //设置是否可用

    });

    </script>

<article >

    默认

    <br/>

    <select style="width: 300px" id="test" class="form-control">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

    <br/>

    ----------------------------------------------------

    <br/>

    1、可搜索选项

    <select id="test_1" class="form-control">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

</article>

================================

<br/>

2、可搜索选项（有搜索关键字控制）

<article>

    <select id="test_2" class="form-control">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

</article>

===============================

<br/>

3、多选

<article>

    <select id="test_3" class="form-control js-example-placeholder-multiple js-states select2-hidden-accessible" multiple="multiple">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

</article>

===============================

<br/>

4、图文选项

<article>

    <select id="test_4" class="js-example-templating js-states form-control select2-hidden-accessible" multiple="multiple">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

</article>

<br/>

======================================

<br/>

5、默认选中某个选项

<article>

    <select id="test_5" class="form-control" multiple="multiple">

        <optgroup label="Alaskan/Hawaiian Time Zone">

            <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

            <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

        </optgroup>

        <optgroup label="Pacific Time Zone">

            <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

            <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

            <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

            <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

        </optgroup>

        <optgroup label="Mountain Time Zone">

            <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

            <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

            <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

            <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

            <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

            <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

            <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

            <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

            <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

        </optgroup>

        <optgroup label="Central Time Zone">

            <option value="AL">Alabama</option>

            <option value="AR">Arkansas</option>

            <option value="IL">Illinois</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="OK">Oklahoma</option>

            <option value="SD">South Dakota</option>

            <option value="TX">Texas</option>

            <option value="TN">Tennessee</option>

            <option value="WI">Wisconsin</option>

        </optgroup>

        <optgroup label="Eastern Time Zone">

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="IN">Indiana</option>

            <option value="ME">Maine</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="OH">Ohio</option>

            <option value="PA">Pennsylvania</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="VT">Vermont</option>

            <option value="VA">Virginia</option>

            <option value="WV">West Virginia</option>

        </optgroup>

    </select>

</article>

<br/>

=========================================

<br/>

6、某些选项不能选中

<select id="test_6" class="form-control">

    <optgroup label="Alaskan/Hawaiian Time Zone">

        <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>

        <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>

    </optgroup>

    <optgroup label="Pacific Time Zone">

        <option value="CA" disabled="disabled" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>

        <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>

        <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>

        <option value="WA" disabled="disabled" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>

    </optgroup>

    <optgroup label="Mountain Time Zone">

        <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>

        <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>

        <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>

        <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>

        <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>

        <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>

        <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>

        <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>

        <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>

    </optgroup>

    <optgroup label="Central Time Zone">

        <option value="AL">Alabama</option>

        <option value="AR">Arkansas</option>

        <option value="IL">Illinois</option>

        <option value="IA">Iowa</option>

        <option value="KS">Kansas</option>

        <option value="KY">Kentucky</option>

        <option value="LA">Louisiana</option>

        <option value="MN">Minnesota</option>

        <option value="MS">Mississippi</option>

        <option value="MO">Missouri</option>

        <option value="OK">Oklahoma</option>

        <option value="SD">South Dakota</option>

        <option value="TX">Texas</option>

        <option value="TN">Tennessee</option>

        <option value="WI">Wisconsin</option>

    </optgroup>

    <optgroup label="Eastern Time Zone">

        <option value="CT">Connecticut</option>

        <option value="DE">Delaware</option>

        <option value="FL">Florida</option>

        <option value="GA">Georgia</option>

        <option value="IN">Indiana</option>

        <option value="ME">Maine</option>

        <option value="MD">Maryland</option>

        <option value="MA">Massachusetts</option>

        <option value="MI">Michigan</option>

        <option value="NH">New Hampshire</option>

        <option value="NJ">New Jersey</option>

        <option value="NY">New York</option>

        <option value="NC">North Carolina</option>

        <option value="OH">Ohio</option>

        <option value="PA">Pennsylvania</option>

        <option value="RI">Rhode Island</option>

        <option value="SC">South Carolina</option>

        <option value="VT">Vermont</option>

        <option value="VA">Virginia</option>

        <option value="WV">West Virginia</option>

    </optgroup>

</select>

<br/>

======================================

<br/>

7、搜索动态加载下拉选项功能（即在用户输入搜索内容时动态去后台取数据）

<article>

    <select id="test_7" class=" form-control " multiple="multiple">

    </select>

</article>

<br/>

=========================================

<button id="btn">获取选中的值</button>

控制器action代码：

public class HomeController : Controller

    {

        public IEnumerable<string> areaList = new List<string>()

        {

            "北京市",

            "天津市",

            "重庆市",

            "上海市",

            "广州市",

            "长沙",

            "哈尔滨",

            "长春",

            "杭州市",

            "南京市",

            "福建市",

            "河北省",

            "山西省",

            "辽宁省",

            "吉林省",

            "黑龙江省",

            "江苏省",

            "浙江省",

            "安徽省",

            "福建省",

            "江西省",

            "山东省",

            "河南省",

            "湖北省",

            "湖南省",

            "广东省",

            "海南省",

            "四川省",

            "贵州省",

            "云南省",

            "陕西省",

            "甘肃省",

            "青海省",

            "台湾省",

            "内蒙古自治区",

            "广西壮族自治区",

            "西藏自治区",

            "宁夏回族自治区",

            "新疆维吾尔自治区",

            "香港特别行政区",

            "澳门特别行政区"

        };

        public JsonResult GetArea(string q, string page)

        {

            var area = new { id = , name = "" };

            var lstRes = areaList.Select((t, i) => new Area

            {

                id = i,

                text = t,

                element = "element" + i

            });

            if (!string.IsNullOrEmpty(q.Trim()))

            {

                lstRes = lstRes.Where(x => x.text.Contains(q));

            }

            var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take() : lstRes.Skip(Convert.ToInt32(page) *  - ).Take();

            return Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet);

        }

        public ActionResult Index()

        {

            return View();

        }

    }

namespace Select2Demo.Models

{

    public class Area

    {

        public int id { get; set; }

        public string text { get; set; }

        public string element { get; set; }

    }

}

详细demo下载地址： http://pan.baidu.com/s/1qYvpzo4 密码：yvag

bootstrap与Select2使用小结的更多相关文章

select2使用小结
做项目考虑到使用的便捷,要用到select2,就研究了一下,做个小结,防止忘记.本文内容是建立在NFine框架上的,使用的MVC三层架构.本人很少写文章,学习的知识也过少,不知道能不能表达准确,如有错 ...
bootstrap的select2校验及不影响原来的格式
<style> .has-error .select2-choice, .has-error .select2-choices, .has-error.simple .select2-ch ...
BootStrap的table技术小结：数据填充、分页、列宽可拖动
本文结构:先说明,后代码.拷贝可直接运行. 一.demo结构: 二.文件引入这些里面除了下面2个比较难找,其他的都很好找 bootstrap-table-resizable.js colResiza ...
【CSS】Bootstrap中select2+popover冲突
网上搜索得到: It changes the position because the position is based on the popover's dimansions and select ...
Bootstrap Table的使用小结
1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值当前rows中有很多 ...
Bootstrap一周学习小结
一.响应式布局 1.bootstrap是自适应mobile和web,会根据分辨率大小而自适应的一个代码库,Bootstrap定义了很多js和css的效果,把这些效果集成为多个API,供在使用时调用. ...
BootStrap Table方法使用小结
参考链接:https://www.cnblogs.com/Amaris-Lin/p/7797920.html
（转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
【Dubbo源码阅读系列】之远程服务调用（上）
今天打算来讲一讲 Dubbo 服务远程调用.笔者在开始看 Dubbo 远程服务相关源码的时候,看的有点迷糊.后来慢慢明白 Dubbo 远程服务的调用的本质就是动态代理模式的一种实现.本地消费者无须知道 ...

随机推荐

js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
Linux文件系统
今天学习了Linux文件系统,现在来做个小总结. 首先Linux中一切都是文件,下面这个清单是Linux系统的顶层目录结构. 清单 1. Linux 系统的顶层目录结构 / 根目录 ├── bin 存 ...
一张图系列——为什么在DllMain里面创建了线程并Wait会卡死
这是一个老话题了,推荐一篇文章: http://blog.csdn.net/breaksoftware/article/details/8150476#0-tsina-1-83826-39723281 ...
asp.net 项目Net4.0 在IE10、 IE 11 下出现 “__doPostBack”未定义的解决办法
我的项目中,服务器端是Windows Server2008 64位,.net版本是4.0,也遇到了树形结构控件.DropDownList控件等不能调用服务器端代码.最后发现js报错. 错误信息:“__ ...
关于UIScrollerView的基本用法和代理
- (void)viewDidLoad { [super viewDidLoad]; scrollView = [[UIScrollView alloc] initWithFrame:CGRectM ...
可变数组NSMutableArray
//创建一个空的可变数组 NSMutableArray *array = [NSMutableArray array]; //向数组里面添加对象 [array addObject:@"< ...
HDU--洗衣服
洗衣服 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
关于兼容IE的一些策略
--css 盒子模型下的 box-sizing 属性,只兼容到ie8: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o- ...
JS 判断字串字节数，并截取长度
var matchWords; function notifyTextLength() { var inputNum = document.getElement ...
SageCRM 快速获取连接中的SID的方法
经常需要使用ajax来修改页面的功能,包括联动.动态加载等. SageCRM的页面必须有SID的,所以要方便的获取它. var getKey = function(key,Url) { if(argu ...

bootstrap与Select2使用小结

bootstrap与Select2使用小结的更多相关文章

随机推荐

热门专题