我正在为一个项目使用Bootstrap-Select,我有一个multiple
列表的问题。我必须满足我的应用程序的以下要求。
更新:
基于@caseyjhol伟大的答案,我开始尝试实现这一点,here是一个JSFiddle。
要求:
1)我需要在列表的顶部呈现选中的项目,而不是在它们原来的位置。这是因为如果我有一个很大的列表,我不希望用户必须向下滚动所有的列表来检查那些有刻度的项目。因此,我在顶部呈现所有选中的项目,然后是一个分隔符,然后是没有选中的项目。
假设原始列表是A B C D E F
,那么..如果我点击C
,列表应该变成C A B C D E F
。如果我点击E
,它应该变成C E A B D F
。
这部分要求确实有效。
2)但是,如果我现在再次取消选择(单击)E
,那么列表应该变成C A B D E F
。这部分不工作,我不知道如何做到这一点。
3)从所选的项目(那些在顶部),我想让他们排序通过拖放使用jQueryUI sortable
。这样,用户不仅可以选择哪些选项,而且在哪个顺序。
例如,我点击了C
,然后点击了E
,列表现在是C E A B D F
。从这里开始,我应该只允许对C E
部分进行排序。现在,假设我将C
拖放到E
之后, Bootstrap <ul>
正确显示为E C A B D F
(这是我需要的)。但是现在,当我提交表单时,html列表仍然有旧的顺序C E A B D F
。所以我仍然不能将<ul>
的状态应用到html选择中。
我尽可能多地记录我的要求。任何帮助都很感激。
Thanks in advance
2条答案
按热度按时间daolsyd01#
每个
li
元素都有一个data-original-index
属性。它告诉你原始select
元素中的选项的索引。我不确定你的确切用例是什么。如果你只是想对选项进行排序,以便选定的选项位于顶部,我认为对select本身执行排序会更有意义,然后用.selectpicker('refresh')
更新bootstrap-select。如果出于某种原因需要对li
元素进行排序,我会这样做:个字符
你需要在生产中做一些不同的事情(比如确保originalIndex得到正确的更新),但这应该会为你指明正确的方向。
xjreopfe2#
这个对我很有效
字符串
当一个选项被选中时,它会将所选选项从其当前位置分离,并将其置于列表的顶部。