javascript - 是否可以在 p :selectManyMenu in Primefaces? 上设置选择计数限制

Question

我有一个字段，根据屏幕上其他字段的设置，该字段应允许无限选择、3 个选择或 1 个选择。

<p:selectManyMenu value="#{orderBean.selectedAddOns}">
    <f:selectItems value="#{catalogBean.addOns}"/>
</p:selectManyMenu>

因此，有 10 个可能的附加组件，但其中一个选项(上面未列出的字段)意味着仅允许使用一个附加组件。另一种意味着允许 3 个，对于任何其他选项或根本没有选项，可以选择任何或所有附加组件。那么动态限制可以进行的选择数量的最直接方法是什么？我希望这样当限制为 3 并且用户选择第四个时，它会取消选择他们选择的第一个，也就是说，如果他们选择 B、C、D，然后选择 G，则选择将变为 C，如果 B 是他们做出的第一个选择，则 D、G。

Answer 1

我会这样做。

<p:selectManyMenu widgetVar="selectManyMenuWV" 
                  showCheckbox="true">  
   <f:selectItem itemLabel="Option 1" itemValue="1" />  
   <f:selectItem itemLabel="Option 2" itemValue="2" />  
   <f:selectItem itemLabel="Option 3" itemValue="3" />  
   <f:selectItem itemLabel="Option 4" itemValue="4" />  
</p:selectManyMenu>

<script>              
   $(function() {
      selectManyMenuWV.items.on('click', function() { 
         restrictMenu($(this).text())
      })
      selectManyMenuWV.checkboxes.on('click', function() {                                                       
         restrictMenu($(this).parent().parent().text())
      })
   });

   function restrictMenu(notValue) {
      //max selection size
      maxSelectionVar = 4;
      if (maxSelectionVar.length != 0) {
         if (selectManyMenuWV.input.find(':selected').length > maxSelectionVar) {
            selectManyMenuWV.unselectItem(selectManyMenuWV.items.filter(function() {    
            if(selectManyMenuWV.input.find(':selected').eq(0).text() != notValue)                                         
               return $(this).text() == selectManyMenuWV.input.find(':selected').eq(0).text();  
            else
              return $(this).text() == selectManyMenuWV.input.find(':selected:last').text();
             }))
          }
       }
    }
</script>

注意:这种方法有其缺点:

• 它根据项目的文本取消选择。
• 它只是客户端，这意味着如果有人禁用/破解了 JS，他将能够选择更多值。我还会在服务器端进行验证。

可以在 github 上找到一个小型工作示例。 。还有一个online Demo .

希望这有帮助。