Skip to content

Select2 #

Find similar titles
  • 최초 작성자
    JehongLee

Structured data

Category
Programming

Example code #




    

Placeholders #

  <p>
    A placeholder value can be defined and will be displayed until a selection is made.
  </p>

  <p>
    <select class="js-example-placeholder-single js-states form-control">
      <option></option>
    </select>
  </p>

  <p>
    Select2 uses the <code>placeholder</code> attribute on multiple select
    boxes, which requires IE 10+. You can support it in older versions with
    <a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
  </p>

  <p>
    <select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-placeholder"></pre>
</div>

Templating #

  <p>
    Various display options of the Select2 component can be changed
  </p>

  <p>
    <select class="js-example-templating js-states form-control"></select>
  </p>

  <p>
    You can access the <code><option></code> element
    (or <code><optgroup></code>) and any attributes on those elements
    using <code>.element</code>.
  </p>

  <p>
    Templating is primarily controlled by the
    <a href="options.html#templateResult"><code>templateResult</code></a>
    and <a href="options.html#templateSelection"><code>templateSelection</code></a>
    options.
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-templating"></pre>
</div>

Loading array data #

  <p>
    Select2 provides a way to load the data from a local array.
  </p>

  <p>
    <select class="js-example-data-array form-control"></select>
  </p>

  <p>
    You can provide initial selections with array data by providing the
    option tag for the selected values, similar to how it would be done for
    a standard select.
  </p>

  <p>
    <select class="js-example-data-array-selected form-control">
      <option value="2" selected="selected">duplicate</option>
    </select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-data-array"></pre>
</div>

Loading remote data #

  <p>
    Select2 comes with AJAX support built in, using jQuery's AJAX methods.
    In this example, we can search for repositories using GitHub's API.
  </p>

  <p>
    <select class="js-example-data-ajax form-control">
      <option value="3620194" selected="selected">select2/select2</option>
    </select>
  </p>

  <p>
    When using Select2 with remote data, the HTML required for the
    <code>select</code> is the same as any other Select2. If you need to
    provide default selections, you just need to include an
    <code>option</code> for each selection that contains the value and text
    that should be displayed.
  </p>

  <pre data-fill-from=".js-code-data-ajax-html"></pre>

  <p>
    You can configure how Select2 searches for remote data using the
    <code>ajax</code> option. More information on the individual options
    that Select2 handles can be found in the
    <a href="options.html#ajax">options documentation for <code>ajax</code></a>.
  </p>

  <pre data-fill-from=".js-code-data-ajax"></pre>

  <p>
    Select2 will pass any options in the <code>ajax</code> object to
    jQuery's <code>$.ajax</code> function, or the <code>transport</code>
    function you specify.
  </p>
</div>

Responsive design - Percent width #

  <p>
    Select2's width can be set to a percentage of its parent to support
    responsive design. The two Select2 boxes below are styled to 50% and 75%
    width respectively.
  </p>

  <p>
    <select class="js-example-responsive js-states" style="width: 50%"></select>
  </p>

  <p>
    <select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-responsive"></pre>

  <div class="alert alert-warning">
    Select2 will do its best to resolve the percent width specified via a
    css class, but it is not always possible. The best way to ensure that
    Select2 is using a percent based width is to inline the
    <code>style</code> declaration into the tag.
  </div>
</div>

Disabled mode #

  <p>
    Select2 will response the <code>disabled</code> attribute on
    <code><select></code> elements. You can also initialize Select2
    with <code>disabled: true</code> to get the same effect.
  </p>

  <p>
    <select class="js-example-disabled js-states form-control" disabled="disabled"></select>
  </p>

  <p>
    <select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
  </p>

  <p>
    <button class="js-programmatic-enable btn btn-primary">
      Enable
    </button>
    <button class="js-programmatic-disable btn btn-warning">
      Disable
    </button>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-disabled"></pre>
</div>

Disabled results #

  <p>
    Select2 will correctly handled disabled results, both with data coming
    from a standard select (when the <code>disabled</code> attribute is set)
    and from remote sources, where the object has
    <code>disabled: true</code> set.
  </p>

  <p>
    <select class="js-example-disabled-results form-control">
      <option value="one">First</option>
      <option value="two" disabled="disabled">Second (disabled)</option>
      <option value="three">Third</option>
    </select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-disabled-results"></pre>
</div>

Programmatic access #

  <p>
    Select2 supports methods that allow programmatic control of the
    component.
  </p>

  <p>
    <button class="js-programmatic-set-val btn btn-primary">
      Set to California
    </button>

    <button class="js-programmatic-open btn btn-success">
      Open
    </button>

    <button class="js-programmatic-close btn btn-success">
      Close
    </button>

    <button class="js-programmatic-init btn btn-danger">
      Init
    </button>

    <button class="js-programmatic-destroy btn btn-danger">
      Destroy
    </button>
  </p>

  <p>
    <select class="js-example-programmatic js-states form-control"></select>
  </p>

  <p>
    <button class="js-programmatic-multi-set-val btn btn-primary">
      Set to California and Alabama
    </button>

    <button class="js-programmatic-multi-clear btn btn-primary">
      Clear
    </button>
  </p>

  <p>
    <select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
  </p>

</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-programmatic"></pre>
</div>

Limiting the number of selections #

Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the multiple attribute with maxSelectionLength in the select2 options

  <p>
    <select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-multiple-limit"></pre>
</div>

0.0.1_20231010_1_v71