Показать все опции мультиселекта jquery

Question

Можно ли показать все опции мультиселекта jQuery, например, список с флажком?

<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();          

Примерно так

Answer 1

если вы используете загрузчик multiselect, вы можете сделать это, используя следующий пример. Вам нужно добавить includeSelectAllOption: true параметр в 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>

Answer 2

, чтобы вы могли получить ту же функциональность, используя HTML, CSS и JavaScript. Вот возможное рабочее решение. Объяснение следующее.

<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>