CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Jean Manzo
Jean Manzo

Reputation: 123

Change multiple select to a single select dropdown

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:

enter image description here

and the design should be like this:

enter image description here

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

Upvotes: 3

Views: 10089

Answers (2)

Julian David
Julian David

Reputation: 311

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.

Upvotes: 3

Vaibhav Mistry
Vaibhav Mistry

Reputation: 338

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.net.cn/p/multiple-select/docs/ https://www.jqueryscript.net/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html

you can also use Chosen, Select2 Plugins too.

Upvotes: 0

Related Questions