Multiple Select With Dropdown List – multiselect

Category: Form , Javascript | January 28, 2019
6 Comments
Demo Download
Author: varundewan
Views Total: 43,125 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:

6 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 ↓
  5. David Clifford

    on my page i needed to integrate multiple multi-select instances,
    this is what I ended up writing to get the selections into
    my submitted form.

    example will use myDrop1,myDrop2,myDrop3 as the multiselect objects.
    for each drop you need to create a hidden input field

    so for myDrop1
    ill make

    lets say my values are numbers and my display for those numbers is the string version of the number.
    IE:
    One
    Two
    Three
    Four

    Then you will have to run the function PrepMultiSelectBeforeSubmit() as part of your submit validation process.

    function PrepMultiSelectBeforeSubmit(numDropObjects)
    {
    for (i = 1; i <= numDropObjects; i++){
    const selectedItems = [];
    for (var index in window['myDrop'+ i].options){
    if(window['myDrop'+ i].options[index].state == 'hide' || window['myDrop'+ i].options[index].state == 'remove'){
    //Four
    // want ^ or ^^^^ ?
    // if you want to submit ‘4’ use-> window[‘myDrop’+ i].options[index].value
    // if you want to submit Four use-> window[‘myDrop’+ i].options[index].html
    selectedItems.push(window[‘myDrop’+ i].options[index].value);
    }
    }
    document.getElementById(‘submittedDrop-‘ + i).value=selectedItems.join();
    }
    }

    Reply ↓

Leave a Reply