用jQuery实现并排多重选择元素

本文概述

• 1.包含多选
• 2.使用多重选择

当我说浏览器的默认多选控件不太容易使用时, 我可能正在和很多人聊天。要选择多个元素, 你需要同时按CTRL, 然后从元素中选择所需的元素。由于这个简单的原因, 多重选择并不是用户或Web开发人员的最爱组件。

要解决此用户体验问题, 有很多方法可以代替使用多选, 其中之一就是著名的左右选择, 你可以从左侧简单地选择元素, 然后将其添加在右侧选择。在本文中, 我们想与你分享一个很棒的插件, 它可以轻松为你轻松完成此任务。

1.包含多选

Multiselect是一个很棒的jQuery插件, 可将你的多选转换为具有两个面的面板。用户可以选择一个或多个项目并将其分别发送到另一侧。要在你的Web项目中使用此插件, 你只需要包含脚本的副本, 并使用script标记将其包含在文档中：

<!-- Using a local copy -->
<script src="multiselect.min.js"></script>

<!-- Using a CDN -->
<script src="https://cdn.rawgit.com/crlcu/multiselect/master/dist/js/multiselect.min.js"></script>

有关该库的更多信息, 请访问Github上的官方存储库, 在此处签出演示页面或阅读文档。

2.使用多重选择

现在, 该插件已包含在项目中, 你以后可以使用JavaScript对其进行初始化。首先, 你需要构建标记, 该标记将包含插件正常工作所需的2个选择, 以及将触发默认操作的按钮。这个想法基本上是构建3列, 其中将包含上述项目, 假设你使用的是Bootstrap之类的CSS框架, 则标记应类似于：

<div class="row">
    <!-- Left side select -->
	<div class="col-xs-5 col-md-5 col-sm-5">
		<select name="from[]" id="mySideToSideSelect" class="form-control" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="3">Item 3</option>
			<option value="2">Item 2</option>
		</select>
	</div>
    
    <!-- Action buttons -->
	<div class="col-xs-2 col-md-2 col-sm-2">
		<button type="button" id="mySideToSideSelect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="mySideToSideSelect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="mySideToSideSelect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="mySideToSideSelect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
    
    <!-- Right side select -->
	<div class="col-xs-5 col-md-5 col-sm-5">
		<select name="to[]" id="mySideToSideSelect_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

现在, 在标记中需要注意多个要点, 以了解插件的工作方式。第一个是你只需要一个ID, 其余的ID也将使用相同的名称, 但带有后缀。例如, 在这种情况下, 我们的左侧元素ID为mySideToSideSelect, 因此操作按钮的ID将以你的元素ID为前缀, 因此在这种情况下, 我们将具有mySideToSideSelect_rightAll等。现在, 右侧的元素ID将具有id初始ID的前缀和后缀_to, 因此正确元素的ID为mySideToSideSelect_to。正确构建标记后, 你只需要使用jQuery初始化多选：

$(document).ready(function() {
	$('#mySideToSideSelect').multiselect();
});

就是这样！值得一提的是, 我们使用了遵循标准架构的非常直接的初始化方法, 但是只要你在multiselect的配置对象中提供所需的元素, 就可以随意更改它们的id, 因此请务必阅读插件文档以获取有关此功能的更多信息。

编码愉快！