精华内容
下载资源
问答
  • select2 Demo

    千次下载 热门讨论 2015-06-22 10:00:57
    今天,向大家介绍一款简单、实用的JQuery插件——select2select2是对select下拉框的改进。如果你对界面的美感又一定要求,你一定会抛弃select,坚决的选择select2阵营。 select2的使用非常简单。我将它在项目中...
  • JQuery插件select2

    千次下载 热门讨论 2015-11-22 17:19:43
    美化了单选框和复选框丑丑的问题,具体使用文档参考:http://blog.csdn.net/qq_19558705/article/details/49978731
  • select2js,css和中文包

    2016-01-14 14:37:40
    select2下拉选项工具,多选,单选,输入匹配组件
  • Bootstrap 4风格的select2下拉框

    千次阅读 2018-03-16 23:14:53
    Bootstrap 4风格的select2下拉框 以 Select2 的 Bootstrap 3 风格 为基础,做了些修改,做成了 Bootstrap 4 风格的 Select2 下拉框。 效果: 使用方法: 将下面所有的代码复制到一个 CSS 文件中...

    Bootstrap 4风格的select2下拉框


    以 Select2 的 Bootstrap 3 风格 为基础,做了些修改,做成了 Bootstrap 4 风格的 Select2 下拉框。

    效果:

    无标题.png

    使用方法:

    将下面所有的代码复制到一个 CSS 文件中,然后在 HTML 文档中引入就行了,不需要再引入 Select2 默认的 CSS样式了。

    .select2-container {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        position: relative;
        vertical-align: middle;
    }
    
    .select2-container .select2-selection--single {
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        height: 28px;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .select2-container .select2-selection--single .select2-selection__rendered {
        display: block;
        padding-left: 8px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .select2-container .select2-selection--single .select2-selection__clear {
        position: relative;
    }
    
    .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
        padding-right: 8px;
        padding-left: 20px;
    }
    
    .select2-container .select2-selection--multiple {
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        min-height: 32px;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .select2-container .select2-selection--multiple .select2-selection__rendered {
        display: inline-block;
        overflow: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .select2-container .select2-search--inline {
        float: left;
    }
    
    .select2-container .select2-search--inline .select2-search__field {
        box-sizing: border-box;
        border: none;
        font-size: 100%;
        margin-top: 5px;
        padding: 0;
    }
    
    .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
    
    .select2-dropdown {
        background-color: white;
        border: 1px solid #aaa;
        border-radius: 4px;
        box-sizing: border-box;
        display: block;
        position: absolute;
        left: -100000px;
        width: 100%;
        z-index: 1051;
    }
    
    .select2-results {
        display: block;
    }
    
    .select2-results__options {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .select2-results__option {
        padding: 6px;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .select2-results__option[aria-selected] {
        cursor: pointer;
    }
    
    .select2-container--open .select2-dropdown {
        left: 0;
    }
    
    .select2-container--open .select2-dropdown--above {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .select2-container--open .select2-dropdown--below {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .select2-search--dropdown {
        display: block;
        padding: 4px;
    }
    
    .select2-search--dropdown .select2-search__field {
        padding: 4px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
    
    .select2-search--dropdown.select2-search--hide {
        display: none;
    }
    
    .select2-close-mask {
        border: 0;
        margin: 0;
        padding: 0;
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        min-height: 100%;
        min-width: 100%;
        height: auto;
        width: auto;
        opacity: 0;
        z-index: 99;
        background-color: #fff;
        filter: alpha(opacity=0);
    }
    
    .select2-hidden-accessible {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
    }
    
    .select2-container--default {
        display: block;
    }
    
    .select2-container--default .select2-selection {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #555555;
        font-size: 14px;
        outline: 0;
    }
    
    .select2-container--default .select2-selection.form-control {
        border-radius: 4px;
    }
    
    .select2-container--default .select2-search--dropdown .select2-search__field {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #555555;
        font-size: 14px;
    }
    
    .select2-container--default .select2-search__field {
        outline: 0;
        /* Firefox 18- */
        /**
           * Firefox 19+
           *
           * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
           */
    }
    
    .select2-container--default .select2-search__field::-webkit-input-placeholder {
        color: #999;
    }
    
    .select2-container--default .select2-search__field:-moz-placeholder {
        color: #999;
    }
    
    .select2-container--default .select2-search__field::-moz-placeholder {
        color: #999;
        opacity: 1;
    }
    
    .select2-container--default .select2-search__field:-ms-input-placeholder {
        color: #999;
    }
    
    .select2-container--default .select2-results__option {
        padding: 6px 12px;
    }
    
    .select2-container--default .select2-results__option[role=group] {
        padding: 0;
    }
    
    .select2-container--default .select2-results__option[aria-disabled=true] {
        color: #777777;
        cursor: not-allowed;
    }
    
    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #f5f5f5;
        color: #262626;
    }
    
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff;
        color: #fff;
    }
    
    .select2-container--default .select2-results__option .select2-results__option {
        padding: 6px 12px;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
        padding-left: 0;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -12px;
        padding-left: 24px;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -24px;
        padding-left: 36px;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -36px;
        padding-left: 48px;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -48px;
        padding-left: 60px;
    }
    
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -60px;
        padding-left: 72px;
    }
    
    .select2-container--default .select2-results__group {
        color: #777777;
        display: block;
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
    }
    
    .select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection {
        /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
        box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
        border-color: #80bdff;
    }
    
    .select2-container--default.select2-container--open {}
    
    .select2-container--default.select2-container--open .select2-selection .select2-selection__arrow b {
        border-color: transparent transparent #999 transparent;
        border-width: 0 4px 4px 4px;
    }
    
    .select2-container--default.select2-container--open.select2-container--below .select2-selection {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-color: transparent;
    }
    
    .select2-container--default.select2-container--open.select2-container--above .select2-selection {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border-top-color: transparent;
    }
    
    .select2-container--default .select2-selection__clear {
        color: #999;
        cursor: pointer;
        float: right;
        font-weight: bold;
        margin-right: 10px;
    }
    
    .select2-container--default .select2-selection__clear:hover {
        color: #333;
    }
    
    .select2-container--default.select2-container--disabled .select2-selection {
        border-color: #ccc;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .select2-container--default.select2-container--disabled .select2-selection,
    .select2-container--default.select2-container--disabled .select2-search__field {
        cursor: not-allowed;
    }
    
    .select2-container--default.select2-container--disabled .select2-selection,
    .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
        background-color: #eeeeee;
    }
    
    .select2-container--default.select2-container--disabled .select2-selection__clear,
    .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove {
        display: none;
    }
    
    .select2-container--default .select2-dropdown {
        box-shadow: .2rem .2rem 0 0 rgb(191,222,255),
            -0.2rem .2rem 0 0 rgb(191,222,255);
        overflow-x: hidden;
        margin-top: -1px;
        border-color: #80bdff;
    }
    
    .select2-container--default .select2-dropdown--above {
        -webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
        margin-top: 1px;
    }
    
    .select2-container--default .select2-results > .select2-results__options {
        max-height: 200px;
        overflow-y: auto;
    }
    
    .select2-container--default .select2-selection--single {
        height: 34px;
        line-height: 1.5;
        padding: 6px 24px 6px 12px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute;
        bottom: 0;
        right: 12px;
        top: 0;
        width: 4px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #999 transparent transparent transparent;
        border-style: solid;
        border-width: 4px 4px 0 4px;
        height: 0;
        left: 0;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #555555;
        padding: 0;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #999;
    }
    
    .select2-container--default .select2-selection--multiple {
        min-height: 34px;
        padding: 0;
        height: auto;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        line-height: 1.5;
        list-style: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
        color: #999;
        float: left;
        margin-top: 5px;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        color: #555555;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin: 5px 0 0 6px;
        padding: 0 6px;
    }
    
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        background: transparent;
        padding: 0 12px;
        height: 32px;
        line-height: 1.5;
        margin-top: 0;
        min-width: 5em;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #999;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        margin-right: 3px;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #333;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-top: 6px;
    }
    
    .select2-container--default .select2-selection--single.input-sm,
    .input-group-sm .select2-container--default .select2-selection--single,
    .form-group-sm .select2-container--default .select2-selection--single {
        border-radius: 3px;
        font-size: 12px;
        height: 30px;
        line-height: 1.5;
        padding: 5px 22px 5px 10px;
        /* 2 */
    }
    
    .select2-container--default .select2-selection--single.input-sm .select2-selection__arrow b,
    .input-group-sm .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .form-group-sm .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-left: -5px;
    }
    
    .select2-container--default .select2-selection--multiple.input-sm,
    .input-group-sm .select2-container--default .select2-selection--multiple,
    .form-group-sm .select2-container--default .select2-selection--multiple {
        min-height: 30px;
        border-radius: 3px;
    }
    
    .select2-container--default .select2-selection--multiple.input-sm .select2-selection__choice,
    .input-group-sm .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .form-group-sm .select2-container--default .select2-selection--multiple .select2-selection__choice {
        font-size: 12px;
        line-height: 1.5;
        margin: 4px 0 0 5px;
        padding: 0 5px;
    }
    
    .select2-container--default .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field,
    .input-group-sm .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    .form-group-sm .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        padding: 0 10px;
        font-size: 12px;
        height: 28px;
        line-height: 1.5;
    }
    
    .select2-container--default .select2-selection--multiple.input-sm .select2-selection__clear,
    .input-group-sm .select2-container--default .select2-selection--multiple .select2-selection__clear,
    .form-group-sm .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-top: 5px;
    }
    
    .select2-container--default .select2-selection--single.input-lg,
    .input-group-lg .select2-container--default .select2-selection--single,
    .form-group-lg .select2-container--default .select2-selection--single {
        border-radius: 6px;
        font-size: 18px;
        height: 46px;
        line-height: 1.3333333;
        padding: 10px 31px 10px 16px;
    }
    
    .select2-container--default .select2-selection--single.input-lg .select2-selection__arrow,
    .input-group-lg .select2-container--default .select2-selection--single .select2-selection__arrow,
    .form-group-lg .select2-container--default .select2-selection--single .select2-selection__arrow {
        width: 5px;
    }
    
    .select2-container--default .select2-selection--single.input-lg .select2-selection__arrow b,
    .input-group-lg .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .form-group-lg .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-width: 5px 5px 0 5px;
        margin-left: -10px;
        margin-top: -2.5px;
    }
    
    .select2-container--default .select2-selection--multiple.input-lg,
    .input-group-lg .select2-container--default .select2-selection--multiple,
    .form-group-lg .select2-container--default .select2-selection--multiple {
        min-height: 46px;
        border-radius: 6px;
    }
    
    .select2-container--default .select2-selection--multiple.input-lg .select2-selection__choice,
    .input-group-lg .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .form-group-lg .select2-container--default .select2-selection--multiple .select2-selection__choice {
        font-size: 18px;
        line-height: 1.3333333;
        border-radius: 4px;
        margin: 9px 0 0 8px;
        padding: 0 10px;
    }
    
    .select2-container--default .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field,
    .input-group-lg .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    .form-group-lg .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        padding: 0 16px;
        font-size: 18px;
        height: 44px;
        line-height: 1.3333333;
    }
    
    .select2-container--default .select2-selection--multiple.input-lg .select2-selection__clear,
    .input-group-lg .select2-container--default .select2-selection--multiple .select2-selection__clear,
    .form-group-lg .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-top: 10px;
    }
    
    .select2-container--default .select2-selection.input-lg.select2-container--open .select2-selection--single {}
    
    .select2-container--default .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #999 transparent;
        border-width: 0 5px 5px 5px;
    }
    
    .input-group-lg .select2-container--default .select2-selection.select2-container--open .select2-selection--single {}
    
    .input-group-lg .select2-container--default .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #999 transparent;
        border-width: 0 5px 5px 5px;
    }
    
    .select2-container--default[dir="rtl"] {}
    
    .select2-container--default[dir="rtl"] .select2-selection--single {
        padding-left: 24px;
        padding-right: 12px;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__rendered {
        padding-right: 0;
        padding-left: 0;
        text-align: right;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
        float: left;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
        left: 12px;
        right: auto;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow b {
        margin-left: 0;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
    .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
    .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
        float: right;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
        margin-left: 0;
        margin-right: 6px;
    }
    
    .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
        margin-left: 2px;
        margin-right: auto;
    }
    
    .has-warning .select2-dropdown,
    .has-warning .select2-selection {
        border-color: #8a6d3b;
    }
    
    .has-warning .select2-container--focus .select2-selection,
    .has-warning .select2-container--open .select2-selection {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
        border-color: #66512c;
    }
    
    .has-warning.select2-drop-active {
        border-color: #66512c;
    }
    
    .has-warning.select2-drop-active.select2-drop.select2-drop-above {
        border-top-color: #66512c;
    }
    
    .has-error .select2-dropdown,
    .has-error .select2-selection {
        border-color: #a94442;
    }
    
    .has-error .select2-container--focus .select2-selection,
    .has-error .select2-container--open .select2-selection {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        border-color: #843534;
    }
    
    .has-error.select2-drop-active {
        border-color: #843534;
    }
    
    .has-error.select2-drop-active.select2-drop.select2-drop-above {
        border-top-color: #843534;
    }
    
    .has-success .select2-dropdown,
    .has-success .select2-selection {
        border-color: #3c763d;
    }
    
    .has-success .select2-container--focus .select2-selection,
    .has-success .select2-container--open .select2-selection {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        border-color: #2b542c;
    }
    
    .has-success.select2-drop-active {
        border-color: #2b542c;
    }
    
    .has-success.select2-drop-active.select2-drop.select2-drop-above {
        border-top-color: #2b542c;
    }
    
    .input-group > .select2-hidden-accessible:first-child + .select2-container--default > .selection > .select2-selection,
    .input-group > .select2-hidden-accessible:first-child + .select2-container--default > .selection > .select2-selection.form-control {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    
    .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--default:not(:last-child) > .selection > .select2-selection,
    .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--default:not(:last-child) > .selection > .select2-selection.form-control {
        border-radius: 0;
    }
    
    .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--default:last-child > .selection > .select2-selection,
    .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--default:last-child > .selection > .select2-selection.form-control {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    
    .input-group > .select2-container--default {
        display: table;
        table-layout: fixed;
        position: relative;
        z-index: 2;
        width: 100%;
        margin-bottom: 0;
    }
    
    .input-group > .select2-container--default > .selection > .select2-selection.form-control {
        float: none;
    }
    
    .input-group > .select2-container--default.select2-container--open, .input-group > .select2-container--default.select2-container--focus {
        z-index: 3;
    }
    
    .input-group > .select2-container--default,
    .input-group > .select2-container--default .input-group-btn,
    .input-group > .select2-container--default .input-group-btn .btn {
        vertical-align: top;
    }
    
    .form-control.select2-hidden-accessible {
        position: absolute !important;
        width: 1px !important;
    }
    
    @media (min-width: 768px) {
        .form-inline .select2-container--default {
            display: inline-block;
        }
    }
    展开全文
  • select2多选设置select多选,select2取值和赋值

    万次阅读 热门讨论 2018-11-05 18:16:55
    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给...

    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为select的id属性,这里的arr是刚才从后端传回前端的id转成的一位数组。

    select2设置select多选,select2取值和赋值,首先需要引入select2的js文件,select2官网地址https://select2.org/

    //select2html代码设置选项,list为后端查询出来的选项,循环赋值

     <select name="id" id="id" multiple="multiple">
            <option value="0">请选择部门</option>
            <volist name="list" id="vo">
                <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected"                </eq>>{$vo.name}</option>
            </volist>
        </select>


        //可以另外设置一个隐藏的input框来存select选中的id,方便传给后端

     <input type="hidden" id="select_id" name="select_id"/>

    //select2插件初始化

      $("#id").select2({
            language : "zh-CN",
            minimumInputLength : 0,
            placeholder:"可多选",//默认值
            allowClear: true,
        })


        //select2插件赋值 

     var select_id = $("#select_id").val();
        arr = select_id.split(",");//注意:arr为select的id值组成的数组
        $('#id').val(arr).trigger('change');


        //select2多选,取值,在下拉框中选中以后,获取到选择的id值

     $('#id').change(function(){
                var o=document.getElementById('id').getElementsByTagName('option');
                var all="";
                console.log(o[1]);
                for(var i=0;i<o.length;i++){
                    if(o[i].selected){
                        all+=o[i].value+",";
                    }
                }
                
                all = all.substr(0, all.length - 1);//去掉末尾的逗号
                $("#bumen").val(all);//赋值给隐藏的文本框
            })

    select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。

     

    阿里云学生机(24岁以下自动获得学生身份)优惠地址,服务器购买,各种云服务购买:https://promotion.aliyun.com/ntms/act/campus2018.html?userCode=cyn41gba

    腾讯云双十一优惠:
    https://cloud.tencent.com/act/cps/redirect?redirect=1048&cps_key=1f197f58b18ff5752c34467efca408fc&from=console

    展开全文
  • Select2学习总结

    万次阅读 2017-12-12 11:56:14
    本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。 一、效果图 二、 使用方式 1.使用前需要引入下面几个插件: ...

    本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。
    一、效果图

    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    二、 使用方式

    1.使用前需要引入下面几个插件:
    select2.css或者select2.min.css
    select2.js或者select2.min.js
    jquery-2.0.3.min.js

    <link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
    <script src="../../plugins/select2/js/select2.js"></script>
    <script src="../../plugins/jquery-2.0.3.min.js"></script>

    2.如果在使用select2单选搜索时想要能够按照拼音字母进行搜索,需要引入pinyin.js插件,并对select2.js源码进行修改。

    <script src="../../plugins/pinyin/pinyin.js"></script>

    pinyin.js下载地址:https://download.csdn.net/download/jianyuerensheng/10381102

    select2.js文件修改方式:
    将select2.js文件中下面这部分代码屏蔽掉

    var original = stripDiacritics(data.text).toUpperCase();
    var term = stripDiacritics(params.term).toUpperCase();
    // Check if the text contains the term
    if (original.indexOf(term) > -1) {
        return data;
    }

    并在上述屏蔽代码的下面添加以下代码:

    //拼音搜索功能
    if (stripDiacritics(data.text).toPinYin === undefined) {
        var original = stripDiacritics(data.text).toUpperCase();
        var term = stripDiacritics(params.term).toUpperCase();
        // Check if the text contains the term
         if (original.indexOf(term) > -1) {
             return data;
        }
    } else {
        //以下为拼音搜索功能新增代码(4866行~4876行)
        var original = '';
        var original1 = '';
        var term = stripDiacritics(params.term).toUpperCase();
        if (stripDiacritics(data.text).toPinYin != undefined) {
            var result = stripDiacritics(data.text).toPinYin();
            original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());
            original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());
            if (original == -1 && original1 == -1) {
                original = stripDiacritics(data.text).toUpperCase().indexOf(term);
            }
        }
        // Check if the text contains the term
        if (original > -1 || original1 > -1) { //如果匹配则original为0
            return data;
        }
    }

    三、常用功能说明

    1.常用参数设置含义

    tags: true,                             // 根据搜索框创建option,默认false
    maximumSelectionLength: 6,              // 最多能够选择的个数
    multiple: true,                         // 多选,默认false
    data: initdata,                         // 下拉框绑定的数据
    allowClear: true,                       // 清空,默认false
    placeholder: '请添加或选择语言'           // 占位提示符
    maximumInputLength: 20,                 // 允许搜索长度  
    minimumResultsForSearch: 20,            // 至少20个结果的时候显示搜索  
    minimumResultsForSearch: Infinity,      // 永久隐藏搜索框  
    selectOnClose: true,                    // 结果显示高亮  
    closeOnSelect: false,                   // select选中关闭下拉框  
    separator: ",",                         // 分隔符  

    2.select2事件:

    //置空  
    $eventSelect.val(null).trigger("change");  
    //选中  
    $eventSelect.on("selected", function (e) { })  
    //移除  
    $eventSelect.on("removed", function () { })  
    //多个事件  
    $eventSelect.on("close removed", function () { })  

    3.获取value和text

    $("#xa").val();  
    $("#xa").select2("val");  
    $("#xa").select2('data').text ;

    四、测试源码示例

    1.select2Test.html代码:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>select2</title>
    </head>
    <body>
        <link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
        <div>
            <label style="width: 100px; font-size: 14px;">单选</label>
            <select id="sel_menu" style="width: 400px;" >
                <option value=""></option>
            </select>
        </div>
        <div style="margin-top:20px;">
            <label style=" width: 100px; font-size: 14px;">多选</label>
            <select id="sel_menu2" multiple="multiple" style="width: 400px;"></select>
        </div>
        <div style="margin-top:20px;">
            <label style="width: 100px; font-size: 14px;">多选(含选中项)</label>
            <select id="sel_menu3" multiple="multiple" style="width: 400px;"></select>
        </div>
        <button onclick=getSelectedData() style ="margin-top: 20px;">多选选中值</button>
        <div style="margin-top:20px;">
            <label style=" width: 100px; font-size: 14px;">分组显示</label>
            <select id="sel_menu4"  style="width:400px;"></select>   
        </div>  
        <script src="../../plugins/jquery-2.0.3.min.js"></script>
        <script src="../../plugins/select2/js/select2.js"></script>
        <script src="../../plugins/pinyin/pinyin.js"></script>
        <script src="../../js/select2Test.js"></script>
    </body>
    </html>

    2.select2Test.js代码:

    //下拉框数据
    var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
    //选中数据
    var selectedData = ["Java", "PHP"];
    //分组下拉框数据(带ID)
    var initGroupDataWithId=[
        { "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
        { "text": "不熟悉的", "children": [{ "id": 5, "text": "C++" }, { "id": 5, "text": "Python" }, { "id": 5, "text": "GO" }] }
    ];
    //分组下拉框数据
    var initGroupData = [
        { "text": "熟悉的", "children": ["Java", "JavaScript", "C#", "PHP"] },
        { "text": "不熟悉的", "children": ["C++", "Python", "GO"] }
    ];
    
    //初始化页面加载
    $(document).ready(function () {
    
        //初始化select2单选
        initSelect2WithSearch();
    
        //初始化select2多选(没有选中项)
        initSelect2();
    
        //初始化select2多选(包含选中项)
        select2WithData(selectedData);
    });
    
    /**
     * 初始化select2单选,默认带搜索功能。
     */
    function initSelect2WithSearch() {
        $("#sel_menu").select2({
            tags: true,
            placeholder: '请搜索或选择语言',
            data: initdata,
            allowClear: true
        });
    }
    /**
     * 初始化select2多选(没有选中项)
     */
    function initSelect2() {
        $("#sel_menu2").select2({
            tags: true,
            maximumSelectionLength: 5,
            placeholder: '请添加或选择语言',
            multiple: true,
            maximumInputLength: 10,//允许长度  
            data: initdata,
        });
    }
    
    /**
     * 初始化select2多选(包含选中项)
     */
    function select2WithData(selectedData) {
        $("#sel_menu3").select2({
            tags: true,                          //支持新增,默认为false
            maximumSelectionLength: 6,           //最多能够选择的个数
            multiple: true,                      //支持多选,默认为false
            data: initdata,                      //下拉框绑定的数据
            allowClear: true,                    //支持清空,默认为false
            placeholder: '请添加或选择语言'      //提示语
        }).val(selectedData).trigger('change');  //多选情况下给选中项的赋值
    }
    
    /**
     * 获取多选框选中项的值
     */
    function getSelectedData() {
        var mulSelData = $("#sel_menu3").val().join(",");//获取多选输入框选中值的方式
        alert("sel_menu3的选中项是:" + mulSelData);
    }
    /**
     * 下拉列表分组显示
     */
    function initSelect2Group() {
        $('#sel_menu4').select2({
            placeholder: '请选择',
            multiple: true,
            data: initGroupData
        });
        $('#sel_menu4').select2().val(["Java"]).trigger('change');
    }

    3.运行结果:
    这里写图片描述

    参考博文:http://blog.csdn.net/u014388408/article/details/50587405

    展开全文
  • select2学习

    万次阅读 2016-07-26 14:47:40
    $('#e3').select2({   placeholder: "请输入",   minimumInputLength: 1,   separator: ",", // 分隔符   maximumSelectionSize: 5, // 限制数量   initSelection: function...

    $('#e3').select2({  

        placeholder: "请输入",  

        minimumInputLength: 1,  

        separator: ",", // 分隔符  

        maximumSelectionSize: 5, // 限制数量  

        initSelection: function(element, callback) { // 初始化时设置默认值  

        },  

        createSearchChoice: function(term, data) { // 创建搜索结果(使用户可以输入匹配值以外的其它值)  

    return {  

                id: term.mid,  

                text: term.name  

            };  

        },  

        formatSelection: function(item) {  

    return item.name;//注意此处的name,要和ajax返回数组的键值一样  

        }, // 选择结果中的显示  

        formatResult: function(item) {  

    return item.name;//注意此处的name  

        }, // 搜索列表中的显示  

        ajax: {  

            url: "{:U('Admin/Member/getzj')}", // 异步请求地址  

            dataType: "json", // 数据类型  

            data: function(term, page) { // 请求参数(GET)  

    return {  

                    q: term  

                };  

            },  

            results: function(data, page) {  

    return data;  

            }, // 构造返回结果  

            escapeMarkup: function(m) {  

    return m;  

            } // 字符转义处理  

        }  

    }); 

     

    这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https://select2.github.io/examples.html

    我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。

    1)编辑界面下的省份、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的城市,选择城市,会继续加载城市下的行政区,从而实现多级关联的下拉列表效果。

     

    2)编辑界面下的多项选择下拉列表

    但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。

     

    3)树形列表的下拉列表

    有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。

     

    2、Select2控件的实际使用代码分析

    1)基础界面代码及操作

    使用select2控件,一般是在常规的select控件上,设置一下即可(设置它的class为select2)。

    复制代码
    复制代码
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">重要级别</label>
            <div class="col-md-8">
                <select id="Importance" name="Importance" class="form-control select2" placeholder="重要级别..."></select>
            </div>
        </div>
    </div>
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">认可程度</label>
            <div class="col-md-8">
                <select id="Recognition" name="Recognition" class="form-control select2" placeholder="认可程度..."></select>
            </div>
        </div>
    </div>
    复制代码
    复制代码

    如果是固定列表,那么也就是设置它的Option内容即可,如下所示。

    复制代码
    复制代码
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">吸烟</label>
            <div class="col-md-8">
                <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸烟...">
                    <option>吸烟</option>
                    <option>不吸烟</option>
                </select>
            </div>
        </div>
    </div>
    复制代码
    复制代码

    简单的select2控件初始化代码如下所示。

    $(document).ready(function() {
      $(".js-example-basic-single").select2();
    });

    一般情况下,如果允许复选多个项目,那么设置 multiple="multiple"即可,如下代码所示。

     <select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>

    2)异步数据绑定操作

    一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。

    基于代码可重用性的考虑,我们编写一个公用的JS函数,用来减少绑定操作的代码,提高代码重用性。

    复制代码
    复制代码
    //绑定字典内容到指定的Select控件
    function BindSelect(ctrlName, url) {
        var control = $('#' + ctrlName);
        //设置Select2的处理
        control.select2({
            allowClear: true,
            formatResult: formatResult,
            formatSelection: formatSelection,
            escapeMarkup: function (m) {
                return m;
            }
        });
    
        //绑定Ajax的内容
        $.getJSON(url, function (data) {
            control.empty();//清空下拉框
            $.each(data, function (i, item) {
                control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
            });
        });
    }
    复制代码
    复制代码

    这样,绑定公用字典模块的数据,也就可以通过下面进一步封装处理即可。

    //绑定字典内容到指定的控件
    function BindDictItem(ctrlName, dictTypeName) {
        var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
        BindSelect(ctrlName, url);
    }

    这样我们初始化Select2 控件,并动态绑定对应的字典值或者其他数据,则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作,BindSelect则是根据URL进行数据的获取并绑定,而$("#Province").on("change", function (e) {});这样的函数处理,就是处理选择内容变化的联动操作了。

    复制代码
    复制代码
            //初始化字典信息(下拉列表)
            function InitDictItem() {
                //部分赋值参考            
                BindDictItem("Area","市场分区");
                BindDictItem("Industry", "客户行业");
                BindDictItem("Grade","客户级别");
                BindDictItem("CustomerType", "客户类型");
                BindDictItem("Source", "客户来源");
                BindDictItem("CreditStatus", "信用等级");
                BindDictItem("Stage","客户阶段");
                BindDictItem("Status", "客户状态");
                BindDictItem("Importance",  "重要级别");     
                
                // 绑定省份、城市、行政区(联动处理)
                BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
                $("#Province").on("change", function (e) {
                    var provinceName = $("#Province").val();
                    BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
                });
    
                $("#City").on("change", function (e) {
                    var cityName = $("#City").val();
                    BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
                });
            }
    复制代码
    复制代码

    而其中MVC控制器返回的数据,我们是返回一个JSON数据列表给前端页面的,他们的数据格式如下所示。

    [ { "Text": "", "Value": "" }, { "Text": "学术会议", "Value": "学术会议" }, { "Text": "朋友介绍", "Value": "朋友介绍" }, { "Text": "广告媒体", "Value": "广告媒体" } ]

    这样前端页面绑定Select2控件的时候,就使用了JSON对象的属性即可。

    复制代码
    复制代码
        //绑定Ajax的内容
        $.getJSON(url, function (data) {
            control.empty();//清空下拉框
            $.each(data, function (i, item) {
                control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
            });
        });
    复制代码
    复制代码

    控制器的实现代码如下:

    复制代码
    复制代码
            /// <summary>
            /// 根据字典类型获取对应的字典数据,方便UI控件的绑定
            /// </summary>
            /// <param name="dictTypeName">字典类型名称</param>
            /// <returns></returns>
            public ActionResult GetDictJson(string dictTypeName)
            {
                List<CListItem> treeList = new List<CListItem>();
                CListItem pNode = new CListItem("", "");
                treeList.Insert(0, pNode);
    
                Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
                foreach (string key in dict.Keys)
                {
                    treeList.Add(new CListItem(key, dict[key]));
                }
                return ToJsonContent(treeList);
            }
    复制代码
    复制代码

    3)树形列表的绑定操作

    对于属性列表,如所属公司、所属部门机构等有层次性的数据,它的绑定操作也是类似的,如下代码所示。

    复制代码
    复制代码
                //绑定添加界面的公司、部门、直属经理
                BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="+@Session["UserId"]);
                $("#Company_ID").on("change", function (e) {
                    var companyid = $("#Company_ID").val();
                    BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid);
                });
                $("#Dept_ID").on("change", function (e) {
                    var deptid = $("#Dept_ID").val();
                    BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
                });
    复制代码
    复制代码

    只是它们返回的数据,我们把它作为有缩进的显示内容而已。

    [ { "Text": "爱奇迪集团", "Value": "1" }, { "Text": " 广州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]

    或者如下所示

    [ { "Text": "广州分公司", "Value": "3" }, { "Text": "总经办", "Value": "6" }, { "Text": "财务部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "产品研发部", "Value": "9" }, { "Text": "  开发一组", "Value": "14" }, { "Text": "  开发二组", "Value": "15" }, { "Text": "  测试组", "Value": "16" }, { "Text": "市场部", "Value": "10" }, { "Text": "  市场一部", "Value": "23" }, { "Text": "  市场二部", "Value": "24" }, { "Text": "综合部", "Value": "11" }, { "Text": "生产部", "Value": "12" }, { "Text": "人力资源部", "Value": "13" } ]

    综上两个部分,我们可以看到它们的Text的内容,是根据层次关系进行空格增加,从而实现了层次关系的显示。

    不过从这个界面效果上讲,这样的处理确实没有EasyUI里面,对下拉列表树的展示好看,也许可以利用更好的Bootstrap插件进行这个树形内容的展示。

      

    4)select2控件的赋值处理

    上面介绍的方法,都是介绍select2控件的初始化,绑定相关的数据,那么如果初始化界面后,我们绑定编辑界面的值的时候,就需要赋值给控件,让它显示真正需要显示的项目了。

    如清空控件的方法如下所示。

                //清空Select2控件的值
                $("#PID").select2("val", "");
                $("#Company_ID").select2("val", "");
                $("#Dept_ID").select2("val", "");

    如果对于多个控件,需要清除,则可以使用集合进行处理

    复制代码
                var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
                $.each(select2Ctrl, function (i, item) {
                    var ctrl = $("#" + item);
                    ctrl.select2("val", "");
                });
    复制代码

    给Select2 控件赋值,让它显示对应值内容的项目,那么操作也就和上面的类似了。

                     $("#CustomerType").select2("val", info.CustomerType);
                     $("#Grade").select2("val", info.Grade);
                     $("#CreditStatus").select2("val", info.CreditStatus);
                     $("#Importance").select2("val", info.Importance);
                     $("#IsPublic").select2("val", info.IsPublic);

    如果需要级联显示的,那么做法增加一个onchange的函数处理就可以了,如下级联代码的赋值处理如下。

                     $("#Province").select2("val", info.Province).trigger('change');//联动
                     $("#City").select2("val", info.City).trigger('change');//联动
                     $("#District").select2("val", info.District);
                    $("#Company_ID1").select2("val", info.Company_ID).trigger('change');
                    $("#Dept_ID1").select2("val", info.Dept_ID).trigger('change');
                    $("#PID1").select2("val", info.PID);

    多个列表项目数据的绑定。

    我们从案例里面可以看到,Select2支持多项值的选择,它们保存后会以逗号分开,如果我们需要在编辑的时候显示存储的多个记录,那么需要把字符串转换为数组列表才能进行正确绑定,如下所示。

    $("#Permission").select2("val", info.Permission.split(','));

     

    最后来两个整体性的界面效果,供参考。

     

     

    展开全文
  • select2下拉框总结

    万次阅读 2017-06-06 11:56:05
    用了这么久的Select2插件,也该写篇文章总结总结。 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。 官网:http://select2.github.io/...
  • jQuery-select2 官方文档笔记(一)——基础应用

    万次阅读 多人点赞 2018-08-18 17:04:50
    select2官网:https://select2.org/ 一、上手 1. CDN 2. 单选select 3. 多选select 4. 禁用状态 5. 宽度(width) 6. 关于选项(Options) 7. Placeholders 二、Data Sources 1. ...
  • select2参数介绍

    万次阅读 2017-06-07 10:10:56
    关于select2 api参数的文档  具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div ...
  • select2官网:https://select2.org/ 一、Search 1. matcher 2. 分组matcher 3. 设置最短最长搜索词组长度(minimumInputLength &amp;amp;amp; maximumInputLength) 4. 最小搜索结果数设置...
  • Select2.js学习总结

    千次阅读 2018-03-10 12:10:26
    本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、按照拼音搜索功能。并通过测试示例对其效果进行了验证。一、效果图 二、 使用方式1.使用前需要引入下面几个插件: select2.css或者select2....
  • select2动态添加option

    千次阅读 2019-06-20 17:21:16
    select2 使用ajax remote加载数据方式时,不能使用$(’#select2’).val();的形式获取option的value,为了统一代码风格,需要把请求接口返回的结果以optin的形式动态添加到select2组件上。 htm...
  • 就如何在select2下拉框大数据的情况下处理以达到流畅、无压力的状态。 一、设计思路 进入前端页面,对于select2下拉框的数据来源;先加载一很小部分数据作为本地数据,先做个简单的分页功能;进来页面之后,点击...
  • select2是一款jquery插件,是普通form表单select组件的升级版。 可以定制搜索、远程数据集(Remote data,本篇主要介绍点)、无限滚动(数据分页功能,这一点很妙)、还有很多高端的参数设置(有需要的下次介绍)。
  • select2 使用详解

    万次阅读 2016-01-26 15:01:28
    构造函数:2.5.2版本:(具体详见http://select2.github.io/select2/#documentation)参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量...
  • select2 api参数中文文档

    万次阅读 2017-07-31 09:01:18
    select2 api参数的文档 具体参数可以参考一下: 参数   类型   描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength ...
  • select2 是替代select 组件的jQuery 插件,它能给你一个自定义的列表选择组件,自定义支持如搜索、标签、远程数据集、无限滚动等及其它常用的选项。 1、安装 CDN(Content Delivery Network)方式: 另外还有安装...
  • select2 使用教程(简)

    万次阅读 2016-11-10 16:11:05
    用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要...
  • 今天使用layer插件做的弹出框中,使用了select2插件,但是select2插件的下拉框无法正常显示,很显然这是由于layer弹出层z-index值比较大,导致了select2的下拉框被遮住了。解决这个的方法一般就是增大select2下拉框...
  • select2各参数的设置相关笔记

    千次阅读 2018-10-23 09:22:28
     首先必须要引入中文包,且一定要放在select2.js之后 &lt;link type="text/css" rel="stylesheet" href="/css/select2.css"&gt; &lt;script type="text/...
  • select2切换事件如何生效

    万次阅读 2017-07-22 10:51:16
    1、问题背景 利用select2生成可搜索下拉框,并且绑定切换事件;但是直接绑定change事件,发现不起作用2、问题原因 select2切换事件 $(function(){ $("#selData").select2(); $("#selData").off()....
  • select2默认的data 是这样的格式 var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 但是我还有一...
  • select2如何设置默认空值

    万次阅读 2017-07-22 11:14:06
    1、问题背景 select2搜索下拉框,当满足某种条件时,让它默认选中空值2、问题原因 select2默认选择空值 $(function(){ $("#selectNull").select2(); $("#selectNull").on("select2:select",...
  • select2实现ajax查询数据

    千次阅读 2018-09-07 16:17:57
    1、 首先需要在jsp页面导入有关select2的js和css文件,前提也需要Jquery的js文件 &amp;lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css&quot; ...
  • select2的language变为中文

    千次阅读 2019-01-14 16:28:33
    1.加一段js &lt;script type="text/javascript"&gt; (function(){if(jQuery&...jQuery.fn.select2&...jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;return e.define("select2...
  • select2官网:https://select2.org/ 一、上手 1. CDN &amp;amp;amp;lt;link href=&amp;amp;quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css&amp;amp;...
  • bootstrap select2插件整合ztree实现树形下拉框

    千次阅读 热门讨论 2019-10-27 14:54:34
    最近在开发管理后台时,...以上两点需求,独立的每个点都有现成的插件可以使用,即基于bootstrap的select2和基于jquery的ztree;所以,我要做的事,就是扩展select2来支持ztree,这样就基本达到了我的技术需求; ...
  • select2参数文档说明 参考博客: 1.使用 Select2下拉框总结 select2使用方法总结 Select2学习总结 老版本select2设置初始值 JS组件系列——Bootstrap Select2组件使用小结 2.事件 jquery插件select2的所有...
  • 这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示。组件的下载地址以及API说明地址:1、Select2使用示例地址:https://select2.github.io/examples.html 、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,034,318
精华内容 1,613,727
关键字:

select2