Multiple Select With Dropdown List – multiselect

Category: Form , Javascript | January 28, 2019
Author:varundewan
Views Total:93,214 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]
});

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
  3. 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
  4. 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
  5. 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
  6. Python Developer

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

    Reply

Leave a Reply