Multiple Select With Dropdown List – multiselect

Category: Form , Javascript | January 28, 2019
8 Comments
Demo Download
Author:varundewan
Views Total:71,633 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:

8 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 ↓
  6. Jannis

    Hi,

    just extend the following functions to select the options in the hidden select-tag:

    addOption: function(e, element){
    var index = Number(element.dataset.index);
    this.clearStates()
    this.selected.push({
    index: Number(index),
    state: ‘add’,
    removed: false
    })
    this.html.select.options[index].selected = 1; // extend this line
    this.options[index].state = ‘remove’;
    this.render()
    },
    removeOption: function(e, element){
    e.stopPropagation();
    this.clearStates()
    var index = Number(element.dataset.index);
    this.selected.forEach(function(select){
    if(select.index == index && !select.removed){
    select.removed = true
    select.state = ‘remove’
    }
    })
    this.html.select.options[index].selected = 0; // extend this line
    this.options[index].state = ‘add’
    this.render();
    },

    Reply ↓
  7. Python Developer

    @Author how am I supposed to implement this solution for more than 1 multi-select inputs?

    Reply ↓

Leave a Reply