I'm having an issue with a multiple select. The only way that can works what I am trying to make is with a multiple select, but I need to transform it to a single dropdown select because that way is design.

The question is: How can I transform a multiple select in a single select? I add a screenshot:

• I have it like this:

and the design should be like this:

Is there anyway for transform it with html or css without remove the multiple="multiple" property?

My tag: <select multiple="multiple" class="destination_s input input--select"></select>

Regards

I'm having an issue with a multiple select. The only way that can works what I am trying to make is with a multiple select, but I need to transform it to a single dropdown select because that way is design.

The question is: How can I transform a multiple select in a single select? I add a screenshot:

• I have it like this:

and the design should be like this:

Is there anyway for transform it with html or css without remove the multiple="multiple" property?

My tag: <select multiple="multiple" class="destination_s input input--select"></select>

Regards

• javascript
• php
• jquery
• html
• css

• Do you want to make a selection in one dropdown, and have that filter the options in the 2nd dropdown? Is the data mapping such that each destination has multiple properties? – Cybernetic Commented Apr 6, 2018 at 16:49
• 1 So you want it to look like a single select, but behave like a multi-select? – Ghostrydr Commented Apr 6, 2018 at 16:58
• @Ghostrydr exactly, that way – Jean Manzo Commented Apr 6, 2018 at 17:02
• You're going need a library/plugin to do that. – Ghostrydr Commented Apr 6, 2018 at 17:05
• Maybe it can be done with the Select2 plugin. – Barmar Commented Apr 6, 2018 at 17:07

2 Answers 2

The only way I see is to stylize a div that looks like an HTML select and with JavaScript show and hide the select Multiple. This is a quick example I just made (maybe the code could be better):

function showSelect(classname) {
            document.getElementById('sel').className = classname;
        }

.hidden {
            display: none;
        }

        .visible {
            display: block;
        }

        .div {
            border: 1px solid black;
            width: 100px;
        }

        #sel {
            width: 100%;
        }

        .arrow {
            float: right;
        }

<div class="div" onmouseover="showSelect('visible')" onmouseout="showSelect('hidden')">
         Choose... <span class="arrow">&#9660;</span>

        <select multiple="multiple" class="hidden" id="sel">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
        </select>
    </div>

Also consider use a framework like Chosen to make it more easily.

i got your point but it cant be possible with the help of HTML/CSS only. You need have JS or jQuery at some point.

Please refer below plugins which might help you to sort it out. http://wenzhixin.cn/p/multiple-select/docs/ https://www.jqueryscript/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html

you can also use Chosen, Select2 Plugins too.