显示多选 jquery 的所有选项

Posted 2023-03-05

【中文标题】显示多选 jquery 的所有选项

【英文标题】：Show all options of multiselect jquery

【发布时间】：2019-06-03 01:09:07

【问题描述】：

是否可以显示多选 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();          

类似的东西

【问题讨论】：

这是什么意思？选择应显示所有选项。还是你想把它格式化成一个复选框？

这不是 CSS 问题吗？

Here 是我猜的答案。希望这对您有所帮助。

@Michael，请查看我的回答

【参考方案1】：

因此您可以使用 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>

【讨论】：

.multiselect 只是制作复选框，是一个库，但是使用 select 的属性 multiple 我们有一个可以在复选框内进行多选的列表，现在有了 .multiselect 我需要一个列表

@Michael，请查看我的第二个答案

【参考方案2】：

如果您使用的是引导多选，则可以使用以下示例进行操作。需要在multiselect()中添加includeSelectAllOption: true参数

$(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 然后不使用多选，只使用复选框。