Multiple Select With Dropdown List – multiselect

Category: Form , Javascript | January 28, 2019
5 Comments
Demo Download
Author: varundewan
Views Total: 33,683 views
Official Page: Go to website
Last Update: January 28, 2019
License: MIT

Preview:

Multiple Select With Dropdown List – multiselect

Description:

A vanilla JavaScript multi-select plugin that transforms the normal multi-select element into a user-friendly tags input.

The users are allowed to select multiple options from the dropdown select. Click the ‘X’ button to remove the selected option.

How to use it:

Import the main JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>

Attach the plugin to a multi-select element and done.

<select multiple="multiple" id="myMulti">
  <option>CSS</option>
  <option>SCRIPT</option>
  <option>COM</option>
  <option>jQuery</option>
  <option>HTML5</option>
</select>
var myDrop = new drop({
    selector:  '#myMulti'
});

Specify an array of preselected options.

var myDrop = new drop({
    selector:  '#myMulti'
    preselected: [0, 2]
});

See Also:

You Might Be Interested In:

5 thoughts on “Multiple Select With Dropdown List – multiselect”

  1. sasikumar vediyappan

    But Not getting the form submitted values, please let me know how about getting the values

    Reply ↓
  2. rok

    yes… please how to get selected values from this dropdown to insert it in mysql trought php??
    thank you

    Reply ↓
    1. Graham Holmes

      If it helps … in PHP, in the select tag, put

      name=multi[], id=multi

      The square bracket allows for multiple values to be fed back as an array in the $_POST[‘multi’] system variable. I’m guessing that other languages will be similar.

      Reply ↓
  4. code-tester

    First Line in your JS is “var $ = { …”
    that overrides jquery and so in many cases it’s not useable (bootstrap needs jquery and so on …)

    Reply ↓

Leave a Reply