DOCSEARCHbyAlgolia
Submit Docs

multiple-select

repository·develop·Indexed 24 days ago

https://github.com/wenzhixin/multiple-select

A jQuery plugin and Vue component (version 2.4.0) designed to enhance selection interfaces by allowing users to select multiple elements via checkboxes. It supports integration with Vue 2 and Vue 3, providing a dedicated Vue component with v-model binding, custom props for data and configuration, and support for various data formats including grouped options and key-value pairs.

Tokens
14.3K
Snippets
39
Records
77
Agent score
83%

What's inside multiple-select

  1. Understand the Multiple Select package structure

    develop

    When downloading the Multiple Select source code, the package is organized into several key directories:

    • dist/: Contains the compiled and minified assets ready for production use. This includes CSS, JavaScript, minified versions, and Vue-specific builds.
    • src/: Contains the original source code for CSS and JavaScript, including constants, locales, themes, utilities, and the core logic.
    • site/: Contains the source code used to generate the project documentation.
    • README.md: Project overview and usage instructions.

    Use the files in dist/ for direct integration into your projects.

    multiple-select/
├── site/
├── src
│   ├── constants
│   ├── locale
│   ├── themes
│   ├── utils
│   ├── virtual-scroll
│   ├── vue
│   ├── MultipleSelect.js
│   ├── multiple-select.js
│   └── multiple-select.scss
├── dist
│   ├── locale/
│   ├── themes/
│   ├── multiple-select.css
│   ├── multiple-select.js
│   ├── multiple-select.min.css
│   ├── multiple-select.min.js
│   ├── multiple-select-locale-all.js
│   ├── multiple-select-locale-all.min.js
│   ├── multiple-select-vue.js
│   └── multiple-select-vue.umd.js
└── README.md

  7. Localize Multiple Select using formatMessage

    develop

    You can customize the text used for various UI elements in Multiple Select by providing a formatMessage function in the configuration object. This function allows you to intercept and return custom strings for specific localization keys.

    To use it, pass a function to the formatMessage option during initialization.

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

  10. Complete Starter Template for Multiple Select

    develop

    Use this HTML5 boilerplate to quickly set up a working environment with Multiple Select using CDN links. This template includes the necessary viewport meta tags for responsive behavior and initializes the plugin within a jQuery ready function.

    <!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.4.0/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.4.0/dist/multiple-select.min.js"></script>
    <script>
      $(function () {
        $('select').multipleSelect()
      })
    </script>
  </body>
</html>

  11. Include Multiple Select Vue component in the browser

    develop

    To use the Vue component version of Multiple Select directly in a browser environment, include the multiple-select-vue.min.js script via a CDN. Note that for full functionality in a browser environment, you may also need the core multiple-select.min.js and the corresponding CSS file.

    <script src="https://unpkg.com/multiple-select@2.4.0/dist/multiple-select-vue.min.js"></script>