How to select multiple values from dropdown?I am using Bootstrap css version 3

Question

I need to select the multiple values from the dropdown.I am using bootstrap css.

This is my dropdown code:

  <select multiple class="dropdown-menu">
        <option value="monday">Monday</option>
        <option value="tuesday">Tuesday</option>
        <option value="wednesday">Wednesday</option>
        <option value="thursday">Thursday</option>
        <option value="friday">Friday</option>
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>

By using the above code i can select multiple options by using CTRL key,but i don't want use ctrl key and i need to select multiple values.

Is it possible to do that with jquery,javascript?

One more thing like Can i select not more than two or three values is it possible?

Many thanks in advance....

There is a great plugin for this [Bootstrap-multiselect](https://github.com/davidstutz/bootstrap-multiselect) that lets you create a dropdown with checkboxes to select. Might be worth looking into! =) — Daniel B, Jul 09 '15 at 09:20
If you really don't want to use Ctrl key to select multiple items, then [bootstrap multiselect plugin](http://davidstutz.github.io/bootstrap-multiselect/) might be able to help you. Check out it's demo. — Patel, Jul 09 '15 at 09:21
Thanks for the response and suggestion,but i don't want use any check boxes. — Bhairav, Jul 09 '15 at 09:28

score 2 · Answer 1 · edited May 23 '17 at 12:16

2

This is one way to do without ctrl click.

$('option').mousedown(function(e) {
e.preventDefault(); 

$(this).prop('selected', $(this).prop('selected') ? false : true);

alert($("#mySelect :selected").length);//select option selected count
//if($("#mySelect :selected").length==2)
//some stuff
   
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="mySelect">
    <option id="1">Option</option>
    <option id="2">Option</option>
    <option id="3">Option</option>
    <option id="4">Option</option>
</select>

See this link.

edited May 23 '17 at 12:16

Community

1
1

answered Jul 09 '15 at 09:23

SatyaTNV

4,137
3
15
31

,Thanks for the response,but i don't need any pop-up or alerts.Can we do that without alert. – Bhairav Jul 09 '15 at 09:51
put it in comments. Just checking purpose here I'm using. – SatyaTNV Jul 09 '15 at 09:52

score 1 · Answer 2 · answered Jul 09 '15 at 09:20

1

$('.dropdown-menu option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

answered Jul 09 '15 at 09:20

Sadikhasan

18,365
21
80
122

Thanks for the response@Sadikhasan,one small doubt like can we select min 1 and max 4. – Bhairav Jul 09 '15 at 09:25

score 0 · Answer 3 · answered Jul 09 '15 at 09:22

0

you can use plugins for dropdowns like "Multiselect" / "chosen" 1. http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/ 2. https://harvesthq.github.io/chosen/

answered Jul 09 '15 at 09:22

Nikki

137
2
3
17

How to select multiple values from dropdown?I am using Bootstrap css version 3

3 Answers3