multiselect2side双向选择列表插件改进版

为了满足实际程序需要,特在multiselect2side插件的基础上改进已满足异步加载(如MVC)的需要。增加了加载url、saveurl属性以及控件实时刷新加载数据方法,请注意下面红色标记部分。

其中:

url:用于异步加载初始化数据;

saveurl:用户保存设置数据;

reload:用于重新加载插件数据;

multiselect2side 能让传统的多选菜单变成左右两列的方式(一边是未选择的列表、一边是已经选择的列表),在多种情况下,这样的排版特别方便。

请参看 multiselect2side plugin: documentation and demo page 查看各种演示。

简单使用

引用 JS 、 CSS 文件:

<link rel="stylesheet" href="${ STATIC_URL }js/jquery.multiselect2side/css/jquery.multiselect2side.css" />
<script type="text/javascript" src="${STATIC_URL}js/jquery.multiselect2side/js/jquery.multiselect2side.js"></script>

创建 form :

<form method="POST">
  <select name="groups" multiple="" id="groups">
    <option value="admin">admin</option>
    <option value="user" selected="">user</option>
  </select>
  </form>

调用 JavaScript :

<script type="text/javascript">
  $("#groups").multiselect2side({
    selectedPosition: 'right',
    moveOptions: false,
    labelsx: '${ _("Available") }',
    labeldx: '${ _("Selected") }',
url: '@Url.RouteUrl("", new { @controller = "Hotel", action = "GetHotelPart"})',
         
  saveurl: '@Url.RouteUrl("", new { @controller = "Hotel", action = "SaveHotelPart"})', }); </script>

刷新控件
search.multiselect2side('reload', "orgid="+nodeid);
效果如图所示:


此控件可用于jquery框架开发。
原文地址:https://www.cnblogs.com/hn731/p/multiselect2side.html