Show all options of multiselect jquery

Question

Is it possible to show all the options of a multiselect jQuery, like a list with checkbox?

<link href="multiselect/jquery.multiselect.css" rel="stylesheet" />
<script src="multiselect/jquery.multiselect.js"></script>

<select id="chkveg" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

$('#chkveg').multiselect();

Something like this

what do you mean by that? a select should show all options. or do you want to format it to look like a checkbox? — Matt.S, Jan 08 '19 at 10:49
[Here](https://stackoverflow.com/questions/50895806/bootstrap-4-multiselect-dropdown?answertab=active#tab-top) is the answer I guess. Hope this helps you. — Geee, Jan 08 '19 at 11:00

Bhavin Solanki · Answer 1 · 2019-01-08T11:34:34.780

1

so you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

<form>
  
  
  <div class="form-group">
    <div class="col-md-4">
        <label for="cheese">
        <input type="checkbox"  value="cheese">Cheese</label>
        <label for="tomatoes">
        <input type="checkbox"  value="tomatoes">Tomatoes</label>
        <label for="mozarella">
        <input type="checkbox"  value="mozarella">Mozzarella</label>
        <label for="mushrooms">
        <input type="checkbox"  value="mushrooms">Mushrooms</label>
        <label for="pepperoni">
        <input type="checkbox"  value="pepperoni">Pepperoni</label>
        <label for="onions">
        <input type="checkbox"  value="onions">Onions</label>
    </div>
</div>
</form>

edited Jan 08 '19 at 11:34

answered Jan 08 '19 at 11:12

Bhavin Solanki

4,740
3
26
46

.multiselect just make checkbox, is a library, but with the property multiple of select we have a list that can be multiselect within checkbox, now with .multiselect i need a list – Michael Jan 08 '19 at 11:17
@Michael , please check my second answer – Bhavin Solanki Jan 08 '19 at 11:21

score 1 · Answer 2 · answered Jan 08 '19 at 11:20

if you are using bootstrap multiselect, you can do it using following example. You need to add includeSelectAllOption: true parameter in multiselect({})

$(function() {
    $('.multiselect-ui').multiselect({
        includeSelectAllOption: true
    });
});

span.multiselect-native-select {
 position: relative
}
span.multiselect-native-select select {
 border: 0!important;
 clip: rect(0 0 0 0)!important;
 height: 1px!important;
 margin: -1px -1px -1px -3px!important;
 overflow: hidden!important;
 padding: 0!important;
 position: absolute!important;
 width: 1px!important;
 left: 50%;
 top: 30px
}
.multiselect-container {
 position: absolute;
 list-style-type: none;
 margin: 0;
 padding: 0
}
.multiselect-container .input-group {
 margin: 5px
}
.multiselect-container>li {
 padding: 0
}
.multiselect-container>li>a.multiselect-all label {
 font-weight: 700
}
.multiselect-container>li.multiselect-group label {
 margin: 0;
 padding: 3px 20px 3px 20px;
 height: 100%;
 font-weight: 700
}
.multiselect-container>li.multiselect-group-clickable label {
 cursor: pointer
}
.multiselect-container>li>a {
 padding: 0
}
.multiselect-container>li>a>label {
 margin: 0;
 height: 100%;
 cursor: pointer;
 font-weight: 400;
 padding: 3px 0 3px 30px
}
.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox {
 margin: 0
}
.multiselect-container>li>a>label>input[type=checkbox] {
 margin-bottom: 5px
}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
 padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
 margin-left: -20px;
 margin-right: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>

<!------ Include the above in your HEAD tag ---------->

<div class="form-group">
    <label class="col-md-4 control-label" for="rolename">Role Name</label>
    <div class="col-md-4">
        <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
        </select>
    </div>
</div>

@Michael then not use multiselect only use checkboxes. – Bhavin Solanki Jan 08 '19 at 11:30 — Bhavin Solanki, Jan 08 '19 at 11:30

Show all options of multiselect jquery

2 Answers2