CODEWITHSUNDEEP
htmldrop-down-menu
WeekendCoder
WeekendCoder

Reputation: 1035

HTML: Select multiple as dropdown

I would like to use a select field with multiple as a common dropdown field with size=1:

<select name="test[]" size="1" multiple>
    <option>123
    <option>456
    <option>789
</select>

Why doesn't this code show the arrow for the dropdown?

Thanks!

Upvotes: 51

Views: 489911

Answers (8)

Shaiful Islam
Shaiful Islam

Reputation: 442

In Html you have add "multiple" attribute

<div id="multy_select_div" class="form-group">
   <label>lebel <small style="color: red">*</small> </label>
   <select  name="lebel" multiple class="form-control" id="multy_select">
        <option  value="" class="text-center" >---Select Item---</option>
        {% for item in queryset%}
            <option value="{{item.id}}">{{ item.name }}</option>
        {% endfor %}
   </select>
</div>

Also you have to add js(select2):

$(document).ready(function() {
    $('#selectChannel').select2({
        dropdownParent: $('#channelDiv')
    });
});

Upvotes: 0

Hitesh Chauhan
Hitesh Chauhan

Reputation: 1074

Multi-select

$(document).ready(function(){
    
     var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
        removeItemButton: true,
        maxItemCount:5,
        searchResultLimit:5,
        renderChoiceLimit:5
      }); 
     
     
 });
.mt-100{margin-top: 100px}body{background: #00B4DB;background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);background: linear-gradient(to right, #0083B0, #00B4DB);color: #514B64;min-height: 100vh}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
            <option value="HTML">HTML</option>
            <option value="Jquery">Jquery</option>
            <option value="CSS">CSS</option>
            <option value="Bootstrap 3">Bootstrap 3</option>
            <option value="Bootstrap 4">Bootstrap 4</option>
            <option value="Java">Java</option>
            <option value="Javascript">Javascript</option>
            <option value="Angular">Angular</option>
            <option value="Python">Python</option>
            <option value="Hybris">Hybris</option>
            <option value="SQL">SQL</option>
            <option value="NOSQL">NOSQL</option>
            <option value="NodeJS">NodeJS</option>
        </select> </div>
</div>

dropdown menu

Tryout this real example - https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849

Upvotes: 7

Rahul Tripathi
Rahul Tripathi

Reputation: 172448

You probably need to some plugin like Jquery multiselect dropdown.

Also you need to close your option tags like this:

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

JSFIDDLE DEMO

Upvotes: 6

Major
Major

Reputation: 6658

Here is the documentation of <select>. You are using 2 attributes:

multiple
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

size
If the control is presented as a scrolling list box (e.g. when multiple is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is 0.

As described in the docs. <select size="1" multiple> will render a List box only 1 line visible and a scrollbar. So you are loosing the dropdown/arrow with the multiple attribute.

Upvotes: 8

mgroat
mgroat

Reputation: 1222

A similar question was asked here

If you're able to add an external library to your project, you can try Chosen

Here's a sample:

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

One thing I've run into, you have to include JQuery BEFORE you include Chosen or you'll get errors.

Upvotes: 80

Sudhakar Singajogi
Sudhakar Singajogi

Reputation: 58

    <select name="select_box"  multiple>
        <option>123</option>
        <option>456</option>
        <option>789</option>
     </select>

Upvotes: -19

Martin Gottweis
Martin Gottweis

Reputation: 2739

It's quite unpractical to make multiple select with size 1. think about it. I made a fiddle here: https://jsfiddle.net/wqd0yd5m/2/

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

Try to explore other options such as using checkboxes to achieve your goal.

Upvotes: 8

CannonFodder
CannonFodder

Reputation: 332

Because you're using multiple. Despite it still technically being a dropdown, it doesn't look or act like a standard dropdown. Rather, it populates a list box and lets them select multiple options.

Size determines how many options appear before they have to click down or up to see the other options.

I have a feeling what you want to achieve is only going to be possible with a JavaScript plugin.

Some examples:

jQuery multiselect drop down menu

http://labs.abeautifulsite.net/archived/jquery-multiSelect/demo/

Upvotes: 8

Related Questions