Multiple Select

https://github.com/wenzhixin/multiple-select
Admin
Multiple Select is a jQuery plugin to select multiple elements with checkboxes.
Tokens:27,434
Snippets:412
Trust Score:10
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Vue Starter Template Usage Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

A Vue.js component example from the starter template, configured for multiple selections.

```vue
<template>
  <div class="hello">
    <MultipleSelect
      v-model="months"
      multiple
      name="months"
      width="200"
      :options="options"
      @change="onChange"
    >
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </MultipleSelect>
  </div>
</template>

<script>
export default {
  data () {
    return {
      months: [],
      options: {
        filter: true
      }
    }
  },
  methods: {
    onChange () {
      console.log(this.months)
    }
  }
}
</script>
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/wenzhixin/multiple-select/blob/develop/vue-examples/README.md

Use this command to install all necessary project dependencies before running the development server or building the project.

```bash
yarn install
```

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

### Install Multiple Select via NPM

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/introduction.md

Use npm to install the Multiple Select component. This command manages CSS, JavaScript, and locale files.

```sh
npm install multiple-select
```

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

### Install Multiple Select using NPM

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/download.md

Install Multiple Select as a dependency in your project using NPM for package management.

```bash
$ npm install multiple-select
```

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

### Run Development Server with Yarn

Source: https://github.com/wenzhixin/multiple-select/blob/develop/vue-examples/README.md

Execute this command to start the development server, which includes hot-reloading for a seamless development experience.

```bash
yarn run serve
```

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

### Initialize and Get Data with Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/getData.html

Use `multipleSelect('getData')` to get the loaded data from the select element. This example initializes the plugin with filtering and logs the data to the console when a button is clicked.

```javascript
var $select = $(\'select\')

function mounted() {
  $select.multipleSelect({
    filter: true
  })

  $(\'#getData\').click(function() {
    alert(JSON.stringify($select.multipleSelect('getData'), null, 4))
  })
}
```

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

### Basic Select Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/single-row.html

Demonstrates a basic select element. This is typically used for single selection scenarios.

```html
<select>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>
```

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

### Initialize Multiple Select with Container Option (Example)

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/container.html

Demonstrates initializing multiple select without and with the container option to show the difference when parent elements have overflow hidden.

```javascript
function mounted() {
  $('select').multipleSelect()
}
```

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

### Initialize Multiple Select with Classes

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/classes.html

Use the `classes` and `classPrefix` options to apply custom CSS classes for styling. This example applies 'input' as both the class and class prefix.

```javascript
function mounted() { $("select").multipleSelect({
  classes: "input",
  classPrefix: "input",
})
}
```

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

### Vue.js Usage Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

A Vue.js component demonstrating how to use the Multiple Select component with options and event handling.

```vue
<template>
  <div class="hello">
    <MultipleSelect
      v-model="months"
      name="months"
      width="200"
      :options="options"
      @change="onChange"
    >
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </MultipleSelect>
  </div>
</template>

<script>
export default {
  data () {
    return {
      months: [],
      options: {
        filter: true
      }
    }
  },
  methods: {
    onChange () {
      console.log(this.months)
    }
  }
}
</script>
```

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

### Initialize Multiple Select with Filter Options and Divider (Normal Mode)

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/filter-options.html

This example shows how to initialize a multiple select with filtering and filter options, including a divider to separate options. Include the necessary CSS and JS files.

```javascript
function mounted() {
  $('#normal-divider').multipleSelect({
    filter: true,
    filterOptions: true,
    data: [
      { value: 1, text: 'Option 1' },
      { value: 2, text: 'Option 2' },
      { value: 3, text: 'Option 3' },
      { divider: true },
      { value: 4, text: 'Option 4' },
      { value: 5, text: 'Option 5' },
      { value: 6, text: 'Option 6' }
    ]
  })
}
```

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

### Group Select Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/single-row.html

Illustrates how to group options within a select element using the optgroup tag. This helps organize choices for better user experience.

```html
<select>
  <optgroup label="Option 1">
    <option>Option 2</option>
    <option>Option 3</option>
  </optgroup>
  <optgroup label="Option 4">
    <option>Option 5</option>
    <option>Option 6</option>
  </optgroup>
  <optgroup label="Option 7">
    <option>Option 8</option>
    <option>Option 9</option>
  </optgroup>
</select>
```

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

### Set and Get Selects by Value

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/setSelects-getSelects.html

Demonstrates how to set selected options using their values and retrieve the currently selected values.

```APIDOC
## SetSelects by Value

### Description
Sets the selected options in the multiple select component using an array of values.

### Method
`multipleSelect('setSelects', values)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **values** (Array) - Required - An array of values corresponding to the options to be selected.

### Request Example
```javascript
$(\'select\').multipleSelect(\'setSelects\', [1, 3])
```

### Response
#### Success Response (200)
None (operation is performed on the component)

## GetSelects by Value

### Description
Retrieves the values of the currently selected options in the multiple select component.

### Method
`multipleSelect('getSelects')`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
$(\'select\').multipleSelect(\'getSelects\')
```

### Response
#### Success Response (200)
- **values** (Array) - The values of the currently selected options.
```

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

### getOptions

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Gets the options object of the Multiple Select instance.

```APIDOC
## getOptions

### Description
Gets the options object.

### Method
```js
$('#multiple').multipleSelect('getOptions')
```
```

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

### Component Usage

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/component.md

Example of how to use the Multiple Select component in a Vue.js application.

```APIDOC
## Component Usage

### Description
This snippet shows the basic integration of the MultipleSelect component within a Vue template.

### Props
- **v-model** (Number | String | Array | Object) - Required - The v-model of Multiple Select.
- **width** (Number | String) - Optional - Define the width property of the select and support a percentage setting.
- **data** (Array) - Required - The data to be loaded.
- **options** (Object) - Optional - The Options API of Multiple Select.

### Events
- **change** - The original change event of select.

### Example
```vue
<MultipleSelect
  ref="select"
  v-model="select"
  width="200"
  :data="data"
  :options="options"
  @change="onChange"
/>
```
```

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

### Initialize Multiple Select with Data and Width

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/auto-width.html

Initializes the multiple select component with custom data and specifies a width. This example shows how to provide data for options.

```javascript
$('.data').multipleSelect({
  data: [
    { value: 1, text: 'Options 1', selected: true },
    { value: 2, text: 'Options 2' },
    { value: 3, text: 'Options 3' }
  ]
})
```

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

### Vue.js Usage Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/browser.md

Demonstrates how to use the Multiple Select component within a Vue.js application. This includes setting up the component, binding a model, and handling change events.

```html
<div id="select">
  <multiple-select
    v-model="select"
    @change="onChange"
  >
    <option value="1">January</option>
    ...
    <option value="12">December</option>
  </multiple-select>
</div>

<script>
  new Vue({
    el: '#select',
    components: {
      'MultipleSelect': MultipleSelect
    },
    data: {
      select: 1
    },
    methods: {
      onChange () {

      }
    }
  })
</script>
```

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

### Set and Get Selects by Text

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/setSelects-getSelects.html

Demonstrates how to set selected options using their text content and retrieve the currently selected options by text.

```APIDOC
## SetSelects by Text

### Description
Sets the selected options in the multiple select component using an array of text labels.

### Method
`multipleSelect('setSelects', texts, 'text')`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **texts** (Array) - Required - An array of text labels corresponding to the options to be selected.
- **'text'** (String) - Required - A literal string indicating that selection is based on text.

### Request Example
```javascript
$(\'select\').multipleSelect(\'setSelects\', [\'February\', \'April\'], \'text\')
```

### Response
#### Success Response (200)
None (operation is performed on the component)

## GetSelects by Text

### Description
Retrieves the text labels of the currently selected options in the multiple select component.

### Method
`multipleSelect('getSelects', 'text')`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **'text'** (String) - Required - A literal string indicating that retrieval is based on text.

### Request Example
```javascript
$(\'select\').multipleSelect(\'getSelects\', \'text\')
```

### Response
#### Success Response (200)
- **texts** (Array) - The text labels of the currently selected options.
```

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

### Vue Plugin Setup for Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

Sets up the Multiple Select Vue component, including CSS, jQuery, and the component registration. This is part of the starter template.

```javascript
import 'multiple-select/dist/multiple-select.min.css'

import './jquery.js'
import Vue from 'vue'
import 'multiple-select/dist/multiple-select.js'
import MultipleSelect from 'multiple-select/dist/multiple-select-vue.js'

Vue.component('MultipleSelect', MultipleSelect)
```

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

### Multiple Select Example

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/single-row.html

Shows a multiple select element, allowing users to choose more than one option. This is the default behavior when multiple options are available.

```html
<select multiple>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>
```

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

### Initialize Multiple Select with Filter Options and Dividers (Group Mode)

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/filter-options.html

This snippet demonstrates initializing a multiple select with grouped options, filtering, filter options, and dividers within groups. This setup helps in structuring and filtering complex option sets. Include the library's CSS and JS.

```javascript
function mounted() {
  $('#group-divider').multipleSelect({
    filter: true,
    filterOptions: true,
    data: [
      {
        type: 'optgroup',
        label: 'Group 1',
        children: [
          { text: 'January', value: 1 },
          { text: 'February', value: 2 },
          { text: 'March', value: 3 },
          { divider: true },
          { text: 'April', value: 4 },
          { text: 'May', value: 5 },
          { text: 'June', value: 6 }
        ]
      },
      {
        type: 'optgroup',
        label: 'Group 2',
        children: [
          { text: 'July', value: 7 },
          { text: 'August', value: 8 },
          { text: 'September', value: 9 },
          { divider: true },
          { text: 'October', value: 10 },
          { text: 'November', value: 11 },
          { text: 'December', value: 12 }
        ]
      }
    ]
  })
}
```

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

### Customizing Messages with formatMessage

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/localizations.md

Use the `formatMessage` option to provide custom messages for various plugin states. This example shows how to set a custom message for formatting.

```javascript
 $('#multiple').multipleSelect({
  formatMessage: function () {
    return 'Format message'
  }
})
```

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

### Refresh Options with New Configuration

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/refreshOptions.html

Demonstrates how to refresh the options of an initialized multiple-select instance. This example shows disabling the filter by passing { filter: false } to the refreshOptions method.

```javascript
$(\'#refreshOptions\').click(function() {
  $select.multipleSelect(\'refreshOptions\', {
    filter: false
  })
})
```

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

### Initialize Multiple Select with Custom Dropdown Width

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/custom-dropdown-width.html

Use the `dropWidth` option to set a specific width for the dropdown. This example also configures multiple selection and width for the select element itself.

```javascript
$"select[name="basic"]").multipleSelect({
  multiple: true,
  width: 500,
  multipleWidth: 70,
  dropWidth: 580
})
```

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

### Initialize Multiple Select with Custom Label Template

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/label-template.html

Use the `labelTemplate` option to define a custom template for optgroup labels. This example adds a star icon and displays the label attribute.

```javascript
function mounted() {
  $('select').multipleSelect({
    labelTemplate: function ($el) {
      return '<i class="fa fa-star"></i>' + $el.attr('label')
    }
  })
}
```

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

### Initialize Multiple Select with Filter

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/refreshOptions.html

Initializes the multiple-select component with the filter option enabled. This setup is required before using methods like refreshOptions.

```javascript
var $select = $(\'select\')
function mounted() {
  $select.multipleSelect({
    filter: true
  })
}
```

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

### Import Multiple Select JavaScript

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

Import the main JavaScript file for Multiple Select into your application's entry point. Ensure jQuery is installed as a peer dependency.

```javascript
import 'multiple-select/dist/multiple-select.js'
```

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

### Initialize Multiple Select with Text Template

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/text-template.html

Use the `textTemplate` option to customize the text displayed for each option. This example adds a star icon before each month's name. Requires jQuery and the Multiple Select plugin.

```javascript
function mounted() {
  $('select').multipleSelect({
    filter: true,
    textTemplate: function ($el) {
      return '<i class="fa fa-star"></i>' + $el.html()
    },
    customFilter: function (label, text) {
      return $('<div/>').append(label).text().includes(text)
    }
  })
}
```

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

### Starter Template with Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/usage.md

A complete HTML starter template demonstrating the integration of Multiple Select with basic single and multiple select elements.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Multiple Select!</title>

    <link rel="stylesheet" href="https://unpkg.com/multiple-select@2.3.1/dist/multiple-select.min.css">
  </head>
  <body>
    <!-- Single Select -->
    <select>
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>

    <!-- Multiple Select -->
    <select multiple="multiple">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/multiple-select@2.3.1/dist/multiple-select.min.js"></script>
    <script>
      $(function () {
        $("select").multipleSelect()
      })
    </script>
  </body>
</html>
```

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

### Initialize Multiple Select with Max Height Unit

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/max-height-unit.html

Use the `maxHeightUnit: 'row'` option when initializing the multiple select to set the maximum height in terms of rows. This example also dynamically sets the `maxHeight` based on an input value.

```javascript
function mounted() {
  $('select').multipleSelect({
    maxHeight: +$('#number').val(),
    maxHeightUnit: 'row'
  })
  $('#number').change(function () {
    $('select').multipleSelect('refreshOptions', {
      maxHeight: +$('#number').val(),
      maxHeightUnit: 'row'
    })
  })
}
```

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

### Main Entry Point for Vue Starter Template

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

The main JavaScript file for the Vue starter template, which imports the Multiple Select plugin.

```javascript
import './plugins/select.js'
```

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

### getData

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Gets the loaded data of the select.

```APIDOC
## getData

### Description
Gets the loaded data of the select.

### Method
```js
$('#multiple').multipleSelect('getData')
```
```

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

### getSelects

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Gets the selected values from the Multiple Select instance.

```APIDOC
## getSelects

### Description
Gets the selected values.

### Method
```js
$('#multiple').multipleSelect('getSelects', type)
```

### Parameters
#### Path Parameters
- **type** (string) - Optional - The type of selected values to retrieve. Can be 'value', 'text', or 'html'. Defaults to 'value'.
```

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

### Initialize Multiple Select with isOpen: true

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/is-open.html

Use the `isOpen: true` option during initialization to make the dropdown open by default. This requires the multiple-select JavaScript file to be included.

```javascript
function mounted() {
  $('select').multipleSelect({ isOpen: true })
}
```

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

### Get Loaded Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Retrieves the data that has been loaded into the select element. Available from v1.6.0.

```javascript
$('#multiple').multipleSelect('getData')
```

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

### Browser Starter Template

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/browser.md

A complete HTML starter template for integrating Multiple Select in a browser. It includes necessary meta tags, CSS, and JavaScript includes for jQuery, Multiple Select, and its Vue.js component.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Multiple Select!</title>

    <link rel="stylesheet" href="https://unpkg.com/multiple-select@2.3.1/dist/multiple-select.min.css">
  </head>
  <body>
    <div id="select">
      <multiple-select>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </multiple-select>

      <multiple-select multiple>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </multiple-select>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/multiple-select@2.3.1/dist/multiple-select.min.js"></script>
    <script src="https://unpkg.com/multiple-select@2.3.1/dist/multiple-select-vue.min.js"></script>
    <script>
      new Vue({
        el: '#select',
        components: {
          'MultipleSelect': MultipleSelect
        }
      })
    </script>
  </body>
</html>
```

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

### Get Options Object

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Retrieves the current options object of the Multiple Select instance. Available from v1.4.0.

```javascript
$('#multiple').multipleSelect('getOptions')
```

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

### Focus and Blur Methods

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/focus-blur.html

Demonstrates how to use the 'focus' and 'blur' methods to control the input's focus state.

```APIDOC
## Focus and Blur

### Description
Use `multipleSelect('focus')` and `multipleSelect('blur')` to programmatically focus and blur the select input.

### Method
`multipleSelect(action)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Usage Example
```javascript
var $select = $(\'select\');

// Initialize multiple select
$select.multipleSelect();

// Focus the select input
$(\'#focusBtn\').click(function () {
  $select.multipleSelect(\'focus\');
});

// Blur the select input
$(\'#blurBtn\').click(function () {
  $select.multipleSelect(\'blur\');
});
```

### Response
This method does not return a value.
```

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

### enable

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Enables the Multiple Select instance.

```APIDOC
## enable

### Description
Enables multiple select.

### Method
```js
$('#multiple').multipleSelect('enable')
```
```

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

### open

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Opens the dropdown for the Multiple Select instance.

```APIDOC
## open

### Description
Open multiple select.

### Method
```js
$('#multiple').multipleSelect('open')
```
```

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

### Get Selected Values

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Retrieves the selected values from the Multiple Select. The type can be 'value', 'text', or 'html' (from 1.4.1). Defaults to 'value'.

```javascript
$('#multiple').multipleSelect('getSelects', 'value')
```

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

### Import Multiple Select Locale

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

Import specific locale files for Multiple Select if needed. This example shows how to import the Chinese locale.

```javascript
// import locale
import 'multiple-select/dist/locale/multiple-select-zh-CN.js'
```

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

### Initialize with Number Array Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/data.html

Provide data as an array of numbers. The numbers will be used as both the display text and the value for each option.

```javascript
$('#number').multipleSelect({
  data: [1, 2, 3]
})
```

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

### Initialize with Object Map Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/data.html

Provide data as an object where keys represent values and values represent the display text. This is a concise way to define options when values are simple identifiers.

```javascript
$('#object').multipleSelect({
  data: {
    1: 'January',
    2: 'February',
    3: 'March',
    4: 'April',
    5: 'May',
    6: 'June',
    7: 'July',
    8: 'August',
    9: 'September',
    10: 'October',
    11: 'November',
    12: 'December',
  }
})
```

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

### Initialize with String Array Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/data.html

Use a simple array of strings for options where the display text and the value are the same. This is suitable for basic lists without distinct identifiers.

```javascript
$('#string').multipleSelect({
  data: ['January', 'February', 'March']
})
```

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

### Multiple Select Vue Build Files

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/introduction.md

Overview of the build files available in the dist/ directory for Vue.js integration. Includes UMD and ES module builds.

```tree
multiple-select/\n└── dist/\n    ├── multiple-select-vue.js\n    ├── multiple-select-vue.min.js\n    ├── multiple-select-vue-es.js\n    └── multiple-select-vue-es.min.js
```

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

### Initialize Multiple Select and Handle Focus/Blur Events

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/focus-blur.html

Initializes the multiple-select plugin and sets up event listeners for buttons that trigger focus and blur actions on the select element. Ensure the HTML includes elements with IDs 'focusBtn' and 'blurBtn'.

```javascript
var $select = $(\'select\')

function mounted() {
  $select.multipleSelect()
  $(\'#focusBtn\').click(function () {
    $select.multipleSelect(\'focus\')
  })
  $(\'#blurBtn\').click(function () {
    $select.multipleSelect(\'blur\')
  })
}
```

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

### Get Selects by Text

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/setSelects-getSelects.html

Retrieves the currently selected options from the multiple select component as an array of their text content. This provides a human-readable representation of the selected items.

```javascript
$('#getSelectsBtn2').click(function () {
  alert('Selected values: ' + $select.multipleSelect('getSelects', 'text'))
})
```

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

### Get Selects by Index

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/setSelects-getSelects.html

Retrieves the currently selected options from the multiple select component as an array of their index values. This returns the values that were programmatically set or user-selected.

```javascript
$('#getSelectsBtn').click(function () {
  alert('Selected values: ' + $select.multipleSelect('getSelects'))
})
```

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

### Build Project for Production with Yarn

Source: https://github.com/wenzhixin/multiple-select/blob/develop/vue-examples/README.md

Use this command to compile and minify your Vue.js application for production deployment.

```bash
yarn run build
```

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

### Multiple Select Project Structure

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/whats-include.md

This bash script outlines the directory structure of the Multiple Select project, showing the organization of source files, distribution assets, and documentation.

```bash
multiple-select/\n├── site/\n├── src\n|   ├── constants\n|   ├── locale\n|   ├── utils\n|   ├── vue\n|\t  ├── MultipleSelect.js\n|\t  ├── multiple-select.css\n|\t  ├── multiple-select.js\n├── dist\n|\t  ├── multiple-select-es.js\n|\t  ├── multiple-select-es.min.js\n|\t  ├── multiple-select.css\n|\t  ├── multiple-select.js\n|\t  ├── multiple-select.min.css\n|\t  ├── multiple-select.min.js\n└── README.md
```

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

### Get Options from Multiple Select Instance

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/getOptions.html

Use the getOptions method to retrieve the options object of a multiple-select instance. This is useful for inspecting or dynamically modifying select options after initialization.

```javascript
var $select = $(\'select\')

function mounted() {
  $select.multipleSelect({
    filter: true
  })
  $(\'#getOptions\').click(function() {
    alert(JSON.stringify($select.multipleSelect(\'getOptions\'), null, 4))
  })
}
```

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

### Calling Multiple Select Methods

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

This is the general syntax for calling any method on a Multiple Select instance. Ensure the element is initialized before calling methods.

```javascript
$('#multiple').multipleSelect('method', parameter)
```

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

### Initialize Multiple Select with Open On Hover

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/open-on-hover.html

Use the `openOnHover: true` option during initialization to enable opening the select dropdown on hover. Ensure the necessary CSS and JS files are included.

```javascript
init({ title: 'Open On Hover', desc: 'Use <code>openOnHover: true</code> to open the select dropdown by hover instead of click.', links: 
['multiple-select.min.css'], scripts: 
['multiple-select.min.js'] })
select {
  width: 100%;
}

function mounted() {
  $('select').multipleSelect({
    openOnHover: true
  })
}
```

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

### Initialize Multiple Select with Minimum Count

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/minimum-count-selected.html

Use the `minimumCountSelected` option to specify the minimum number of selected items required for the count text to be displayed. This example sets the minimum to 8.

```javascript
function mounted() { $('select').multipleSelect({ minimumCountSelected: 8 }) }
```

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

### Initialize jQuery for Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/webpack.md

This JavaScript file is part of the starter template and ensures jQuery is globally available for Multiple Select.

```javascript
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
```

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

### Set Filter Placeholder in Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/filter-placeholder.html

Use the `filterPlaceholder` option within the Multiple Select initialization to define custom placeholder text for the filter input. This is useful for guiding users on what to type.

```javascript
function mounted() { $("select").multipleSelect({ filter: true, filterPlaceholder: "The filter placeholder" })
}
```

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

### Initialize with Grouped Options Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/data.html

Structure data with 'optgroup' types to create collapsible groups of options. Each group can contain its own set of child options, allowing for organized selections.

```javascript
$('#group').multipleSelect({
  data: [
    {
      type: 'optgroup',
      label: 'Group 1',
      children: [
        { text: 'January', value: 1, selected: true },
        { text: 'February', value: 2, disabled: true },
        { text: 'March', value: 3 },
        { text: 'April', value: 4 },
        { text: 'May', value: 5 },
        { text: 'June', value: 6 }
      ]
    },
    {
      type: 'optgroup',
      label: 'Group 2',
      children: [
        { text: 'July', value: 7 },
        { text: 'August', value: 8 },
        { text: 'September', value: 9 },
        { text: 'October', value: 10 },
        { text: 'November', value: 11 },
        { text: 'December', value: 12 }
      ]
    }
  ]
})
```

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

### Initialize Multiple Select with Bootstrap Theme

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/themes.html

Initializes the multiple select component with the Bootstrap theme. Ensure the necessary CSS and JS files are included.

```javascript
init({
  title: 'The Themes',
  desc: 'Multiple select with bootstrap theme.',
  links: [
    'multiple-select.min.css',
    'themes/bootstrap.min.css'
  ],
  scripts: ['multiple-select.min.js']
})
```

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

### Initialize Multiple Select with Options

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/multiple-items.html

Initializes the multiple select component with options for multiple selections, width, and filtering. Ensure the CSS and JS files are included.

```javascript
init({ title: 'Multiple Items', desc: 'Use <code>multiple</code> and <code>multipleWidth</code> options to enable multiple items.', links: 
['multiple-select.min.css'], scripts: 
['multiple-select.min.js'] })
select {
  width: 100%;
}
```

```javascript
function mounted() {
  $('select').multipleSelect({
    multiple: true,
    multipleWidth: 80,
    filter: true,
    filterOptions: true
  })
}
```

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

### Include Multiple Select via UNPKG CDN

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/introduction.md

Link to the UNPKG CDN to include Multiple Select's CSS and JavaScript directly in your project.

```html
https://unpkg.com/multiple-select@2.3.1
```

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

### Initialize Multiple Select with Custom Filter

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/custom-filter.html

Initializes the Multiple Select plugin with filtering enabled and a custom filter function. The custom filter checks if the original text starts with the search term when a checkbox is checked, otherwise it performs a standard text search.

```javascript
function mounted() {
  $('select').multipleSelect({
    filter: true,
    customFilter: function ({ text, search, originalText, originalSearch }) {
      if ($('input').prop('checked')) {
        return originalText.indexOf(originalSearch) === 0
      }
      return text.indexOf(search) === 0
    }
  })
}
```

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

### Methods

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/component.md

Available methods that can be called on the Multiple Select component instance.

```APIDOC
## Methods

The calling method syntax: `this.$refs.select.methodName(parameter)`.
Example: `this.$refs.select.getOptions()`.
All methods are defined in [Methods API](/docs/en/methods/).
```

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

### Initialize Multiple Select with Filter and Accept On Enter

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/filter-accept-on-enter.html

Use the `filterAcceptOnEnter: true` option to enable accepting filter input on Enter or Space. This speeds up keyboard use by automatically selecting all filtered items and closing the dropdown.

```javascript
function mounted() { $('select').multipleSelect({ filter: true, filterAcceptOnEnter: true }) }
```

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

### Initialize Multiple Select and Handle Check/Uncheck All

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/checkAll-uncheckAll.html

Initializes the multiple-select plugin on a select element and sets up click handlers for buttons to check or uncheck all options. Ensure the DOM is ready before executing this script.

```javascript
var $select = $("select")

function mounted() {
  $select.multipleSelect()
  $("#checkAllBtn").click(function () {
    $select.multipleSelect("checkAll")
  })
  $("#uncheckAllBtn").click(function () {
    $select.multipleSelect("uncheckAll")
  })
}
```

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

### Run Project Tests with Yarn

Source: https://github.com/wenzhixin/multiple-select/blob/develop/vue-examples/README.md

This command executes the test suite for your Vue.js project.

```bash
yarn run test
```

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

### Basic Usage of MultipleSelect Component

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/component.md

Demonstrates how to use the MultipleSelect component in a Vue.js application. Ensure you have the component imported and registered.

```vue
<MultipleSelect
  ref="select"
  v-model="select"
  width="200"
  :data="data"
  :options="options"
  @change="onChange"
/>
```

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

### focus

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Sets focus to the Multiple Select instance.

```APIDOC
## focus

### Description
Focus on the multiple select.

### Method
```js
$('#multiple').multipleSelect('focus')
```
```

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

### Initialize Multiple Select with Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/divider.html

Use the 'data' option to initialize multiple select with custom options, including dividers.

```javascript
function mounted() {
  $(".select").multipleSelect();
  $(".data-select").multipleSelect({
    data: [
      { value: 1, text: 'Option 1' },
      { value: 2, text: 'Option 2' },
      { value: 3, text: 'Option 3' },
      { divider: true },
      { value: 4, text: 'Option 4' },
      { value: 5, text: 'Option 5' },
      { value: 6, text: 'Option 6' }
    ]
  });
}
```

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

### Initialize Multiple Select with Event Handlers

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/events.html

Initializes the Multiple Select plugin with various event handlers. Use this to perform actions when specific events like opening, closing, checking, or blurring occur.

```javascript
var $log = $("textarea")
function log(text) {
  $log.append(text)
  $log.scrollTop($log[0].scrollHeight - $log.height())
}
function mounted() {
  $("select").multipleSelect({
    filter: true,
    onOpen: function () {
      log('onOpen event fire!\n')
    },
    onClose: function () {
      log('onClose event fire!\n')
    },
    onCheckAll: function () {
      log('onCheckAll event fire!\n')
    },
    onUncheckAll: function () {
      log('onUncheckAll event fire!\n')
    },
    onFocus: function () {
      log('onFocus event fire!\n')
    },
    onBlur: function () {
      log('onBlur event fire!\n')
    },
    onOptgroupClick: function (view) {
      log('onOptgroupClick event fire! view: ' + JSON.stringify(view) + '\n')
    },
    onClick: function (view) {
      log('onClick event fire! view: ' + JSON.stringify(view) + '\n')
    },
    onFilter: function (text) {
      log('onFilter event fire! text: ' + text + '\n')
    },
    onAfterCreate: function () {
      log('onAfterCreate event fire!\n')
    }
  })
}
```

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

### checkAll

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/methods.md

Checks all available options in the Multiple Select instance.

```APIDOC
## checkAll

### Description
Check all checkboxes.

### Method
```js
$('#multiple').multipleSelect('checkAll')
```
```

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

### Initialize with Object Array Data

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/data.html

Use an array of objects to define options with both text and value properties. This is useful for complex data where each option needs a unique identifier.

```javascript
function mounted() {
  $('#basic').multipleSelect({
    data: [
      { text: 'January', value: 1 },
      { text: 'February', value: 2 },
      { text: 'March', value: 3 },
      { text: 'April', value: 4 },
      { text: 'May', value: 5 },
      { text: 'June', value: 6 },
      { text: 'July', value: 7 },
      { text: 'August', value: 8 },
      { text: 'September', value: 9 },
      { text: 'October', value: 10 },
      { text: 'November', value: 11 },
      { text: 'December', value: 12 }
    ]
  })
}
```

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

### Initialize Multiple Select with Filter Options (Group Mode)

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/filter-options.html

Configure a multiple select with grouped options, filtering, and filter options. This is useful for organizing a large number of choices. Ensure the library's CSS and JS are loaded.

```javascript
function mounted() {
  $('#group-no-divider').multipleSelect({
    filter: true,
    filterOptions: true,
    data: [
      {
        type: 'optgroup',
        label: 'Group 1',
        children: [
          { text: 'January', value: 1 },
          { text: 'February', value: 2 },
          { text: 'March', value: 3 },
          { text: 'April', value: 4 },
          { text: 'May', value: 5 },
          { text: 'June', value: 6 }
        ]
      },
      {
        type: 'optgroup',
        label: 'Group 2',
        children: [
          { text: 'July', value: 7 },
          { text: 'August', value: 8 },
          { text: 'September', value: 9 },
          { text: 'October', value: 10 },
          { text: 'November', value: 11 },
          { text: 'December', value: 12 }
        ]
      }
    ]
  })
}
```

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

### Initialize Multiple Select and Handle Check/Uncheck

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/check-uncheck.html

Initializes the multiple select plugin and sets up event listeners for buttons that check or uncheck a specific option by its index.

```javascript
var $select = $(\'select\')

function mounted() {
  $select.multipleSelect()
  $(\'#checkBtn\').click(function () {
    $select.multipleSelect(\'check\', 2)
  })
  $(\'#uncheckBtn\').click(function () {
    $select.multipleSelect(\'uncheck\', 2)
  })
}
```

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

### onAfterCreate

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/events.md

Fires after the Multiple Select component has been fully initialized and created.

```APIDOC
## onAfterCreate

### Description
Fires after the Multiple Select is created.

### Parameters
This event does not have specific parameters beyond the standard event object.
```

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

### Include CSS File

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/usage.md

Link the Multiple Select CSS file in the head of your HTML document.

```html
<link rel="stylesheet" href="multiple-select.min.css">
```

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

### Initialize Multiple Select with i18n Options

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/i18n.html

Use this to initialize the Multiple Select plugin with custom internationalized text for different user interactions. This is useful for adapting the plugin to different languages.

```javascript
function mounted() {
  $('select').multipleSelect({
    filter: true,
    formatSelectAll () {
      return '&#91;全选&#93;'
    },
    formatAllSelected () {
      return '已选择所有记录'
    },
    formatCountSelected (count, total) {
      return '已从 ' + total + ' 中选择 ' + count + ' 条记录'
    },
    formatNoMatchesFound () {
      return '没有找到记录'
    }
  })
}
```

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

### Initialize Vue Component with Multiple Select

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/vue-component.html

Initializes the Vue application and registers the MultipleSelect component. Ensure Vue.js and the multiple-select-vue plugin are loaded.

```javascript
init({ title: 'Vue Component', desc: 'Use Plugin: <a href="https://vuejs.org/" target="_blank">Vue.js</a> and multiple-select-vue.', links: ['multiple-select.min.css'], scripts: [ 'https://unpkg.com/vue@3/dist/vue.global.js', 'multiple-select.min.js', 'https://unpkg.com/multiple-select@2.3.1/dist/multiple-select-vue.umd.js' ] })

const { computed, createApp, ref, useTemplateRef } = window.Vue
const app = createApp({
  setup () {
    const value1 = ref(1)
    const value2 = ref([1])
    const disabled = ref(false)
    const filter = ref(false)
    const select = useTemplateRef('my-select')
    const options = computed(() => ({ filter: filter.value }))
    const data = [
      { text: 'January', value: 1 },
      { text: 'February', value: 2 },
      { text: 'March', value: 3 },
      { text: 'April', value: 4 },
      { text: 'May', value: 5 },
      { text: 'June', value: 6 }
    ]
    const getSelects = () => {
      alert(select.value.getSelects())
    }
    return {
      value1,
      value2,
      disabled,
      filter,
      options,
      data,
      getSelects
    }
  }
})

app.component('MultipleSelect', window.MultipleSelect)
app.mount('#app')
```

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

### Props

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/docs/component.md

Detailed explanation of the props available for the Multiple Select component.

```APIDOC
## Props

### v-model
- **Type:** `Number | String | Array | Object`
- **Detail:** The v-model of Multiple Select.
- **Default:** `undefined`

### name
- **Type:** `String`
- **Detail:** The name of select.
- **Default:** `undefined`

### multiple
- **Type:** `Boolean | String`
- **Detail:** Single or multiple select.
- **Default:** `false`

### disabled
- **Type:** `Boolean`
- **Detail:** The disabled attribute of select.
- **Default:** `false`

### width
- **Type:** `Number | String`
- **Detail:** Define the width property of the select and support a percentage setting.
- **Default:** `undefined`

### maxWidth
- **Type:** `Number | String`
- **Detail:** Define the maximum width of the select when `width: 'auto'` is set. If the auto-calculated width exceeds this value, the width will be capped at `maxWidth`.
- **Default:** `undefined`

### data
- **Type:** `Array`
- **Detail:** The data to be loaded.
  Group format:
  ```js
  [
    {
      type: 'optgroup',
      label: 'Group 1',
      children: [
        {
          text: 'Option 1',
          value: 1
        }
      ]
    }
  ]
  ```
  Option format:
  ```js
  [
    {
      text: 'Option 1',
      value: 1
    }
  ]
  ```
  Or Object:
  ```js
  {
    1: 'Option 1'
  }
  ```
  Or String/Number Array:
  ```js
  ['option1']
  [1]
  ```
- **Default:** `undefined`

### options
- **Type:** `Object`
- **Detail:** The [Options API](/docs/en/options) of Multiple Select.
- **Default:** `{}`
```

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

### Initialize Multiple Select with Show Clear

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/show-clear.html

Use the 'showClear' option when initializing the multiple select component to display an icon that unchecks all selected items.

```javascript
function mounted() { $('select').multipleSelect({ showClear: true })
}
```

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

### Initialize Multiple Select with Display Values

Source: https://github.com/wenzhixin/multiple-select/blob/develop/site/website/static/templates/display-values.html

Use the `displayValues: true` option when initializing the multiple select to show selected values instead of text. Ensure the CSS and JS files are included.

```javascript
init({ title: 'Display Values', desc: 'Use <code>displayValues: true</code> option to display selected values instead text.', links: [\'multiple-select.min.css\'], scripts: [\'multiple-select.min.js\'] })
select {
  width: 100%;
}

function mounted() {
  $(\'select\').multipleSelect({
    displayValues: true
  })
}
```
Tokens:
Raw