Home jQuery How to create a jQuery multiselect element

How to create a jQuery multiselect element

by TheScriptKiddie
How to create a jquery multiselect element

Overview

In this post, we are going to create a dropdown which will let you select multiple options. The purpose is to create the dropdown with a simple select element.

For this we are going to write a simple select element in our html and then generate the dropdown by writing code in jQuery.

Demo

Steps

  • First we will create new element using jQuery
  • Next, we will copy options from select element and append them to our newly created element
  • Attach events to the new option elements so user can select them when clicked
  • Show selected elements in selected div

Use the Sidebar to add the URL of the GitHub Repository to embed.

Let’s Start

You must include jQuery in your page before closing head tag to create this dropdown.

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>

HTML

<div id="multi-select">
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</div>

There is only one select element wrapped in a div with id ‘multi-select’

CSS

.multi-wrap {
    width: 100%;
    min-height: 35px;
    display: block;
    max-width: 300px;
    border: 1px solid #ccc;
    padding: 5px;
    position: relative;
}

.multi-selected {
    display: block;
    height: 100%;
    min-height: 35px;
    cursor: pointer;
}
.multi-list {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background: #eee;
    border: 1px solid #ccc;
    box-sizing: border-box;
    width: 100%;
}

.multi-list div {
    padding: 7px 5px;
    font-size: 13px;
    font-family: Roboto;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
}

.multi-list div:hover,
.multi-list div.selected-option {
    background: #ccc;
}
.multi-selected span {
    padding: 5px;
    background: #eee;
    margin: 2px 4px;
    display: inline-block;
    font-size: 12px;
}

JavaScript

$(function(){
    var wrap = $("#multi-select"),
        selectEl = wrap.children("select");

    var mainEl = $("<div></div>").addClass("multi-wrap"),
        selectedEl = $("<div></div>").addClass("multi-selected").text("click here"),
        listEl = $("<div></div>").addClass("multi-list").css("display","none");

    selectEl.find("option").each(function(){
        var option = $(this);
        var optionEl = $("<div></div>").text(option.text());
        optionEl.appendTo(listEl);

        optionEl.on('click',function(){
            $(this).toggleClass("selected-option");

            selectedEl.empty();
            listEl.find(".selected-option").each(function(){
                var $this = $(this),
                    span = $("<span></span>").text($this.text());
                span.appendTo(selectedEl);
            })
        });
    });
    
    selectedEl.on("click",function(){
        listEl.slideToggle();
    });
    mainEl.append(selectedEl).append(listEl);
    wrap.append(mainEl);

    selectEl.hide();
});
  • Line 5-7
    We are creating three new elements. mainEl to create a wrap for dropdown, selectedEl to show selected options and listEl to contain list of options which will display as a dropdown.
  • Line 9-24
    Looping through all the options in select element and attaching them to listEl
  • Line 14-23
    Attaching click event with the new options. When user will click any option it gets selected/deselected.
  • Line 18-22
    Displaying the selected elements inside selectedEl.
  • Line 26-28
    Attaches a click event handler to dropdown element. When user clicks on element, it will show/hide options list, creating a dropdown effect.
  • Line 32
    Hides the default select element.

Whole Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery MultiSelect Element</title>

    <style>
        .multi-wrap {
            width: 100%;
            min-height: 35px;
            display: block;
            max-width: 300px;
            border: 1px solid #ccc;
            padding: 5px;
            position: relative;
        }
        
        .multi-selected {
            display: block;
            height: 100%;
            min-height: 35px;
            cursor: pointer;
        }
        .multi-list {
            position: absolute;
            top: 100%;
            left: 0px;
            right: 0px;
            background: #eee;
            border: 1px solid #ccc;
            box-sizing: border-box;
            width: 100%;
        }
        
        .multi-list div {
            padding: 7px 5px;
            font-size: 13px;
            font-family: Roboto;
            cursor: pointer;
            box-sizing: border-box;
            width: 100%;
        }
        
        .multi-list div:hover,
        .multi-list div.selected-option {
            background: #ccc;
        }
        .multi-selected span {
            padding: 5px;
            background: #eee;
            margin: 2px 4px;
            display: inline-block;
            font-size: 12px;
        }
    </style>
</head>
<body>
   
<div id="multi-select">
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</div>

    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function(){
            var wrap = $("#multi-select"),
                selectEl = wrap.children("select");

            var mainEl = $("<div></div>").addClass("multi-wrap"),
                selectedEl = $("<div></div>").addClass("multi-selected").text("click here"),
                listEl = $("<div></div>").addClass("multi-list").css("display","none");

            selectEl.find("option").each(function(){
                var option = $(this);
                var optionEl = $("<div></div>").text(option.text());
                optionEl.appendTo(listEl);

                optionEl.on('click',function(){
                    $(this).toggleClass("selected-option");

                    selectedEl.empty();
                    listEl.find(".selected-option").each(function(){
                        var $this = $(this),
                            span = $("<span></span>").text($this.text());
                        span.appendTo(selectedEl);
                    })
                });
            });
            
            selectedEl.on("click",function(){
                listEl.slideToggle();
            });
            mainEl.append(selectedEl).append(listEl);
            wrap.append(mainEl);

            selectEl.hide();
        });
    </script>
</body>
</html>

That was all. You can copy this code and change it according to your requirements for the dropdown.
If you need me to write any script, let me know in the comments.

You may also like

Leave a Comment