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

本文概述

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

当我说浏览器的默认多选控件不太容易使用时, 我可能正在和很多人聊天。要选择多个元素, 你需要同时按CTRL, 然后从元素中选择所需的元素。由于这个简单的原因, 多重选择并不是用户或Web开发人员的最爱组件。
要解决此用户体验问题, 有很多方法可以代替使用多选, 其中之一就是著名的左右选择, 你可以从左侧简单地选择元素, 然后将其添加在右侧选择。在本文中, 我们想与你分享一个很棒的插件, 它可以轻松为你轻松完成此任务。
1.包含多选Multiselect是一个很棒的jQuery插件, 可将你的多选转换为具有两个面的面板。用户可以选择一个或多个项目并将其分别发送到另一侧。要在你的Web项目中使用此插件, 你只需要包含脚本的副本, 并使用script标记将其包含在文档中：

< !-- Using a local copy --> < script src="http://www.srcmini.com/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="http://www.srcmini.com/1"> Item 1< /option> < option value="http://www.srcmini.com/3"> Item 3< /option> < option value="http://www.srcmini.com/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初始化多选：