Question

我使用Bootstrap Dual Listbox来帮助用户选择一些选项。
你可以看到我在我的项目中添加了插件。它的成功。但是当用户选择选项时尝试限制时我遇到了问题。

实施例：有一些选项，如：

苹果
芒果
橙
甜瓜
番石榴

用户必须选择3选项。您不能选择1,2,4或5。

问题是即将限制选项可以选择。默认情况下，用户不限于选择。

这是我的一些代码：

<script src="<?php echo $baseurl; ?>assets/js/plugins/dual/dist/jquery.bootstrap-duallistbox.js"></script>
<link href="<?php echo $baseurl; ?>assets/js/plugins/dual/dist/bootstrap-duallistbox.css" rel="stylesheet" type="text/css" media="all">

<div id="addimeiform" class="box-content form-horizontal">
    <select multiple="multiple" id="imei_multi" name="duallistbox_demo1">
        <?php
             while ($row = mysql_fetch_array($query)) {
                 echo "<option>".$row['imei']."</option>";
             }
        ?>
    </select>
</div>

<script>
    var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();
</script>

如果您遇到同样的问题，请在此处分享。提前致谢！

Answer 1

使用活动change
计算所选值
如果有三个以上取消选择其余
使用函数refresh

demo2.on('change', function(){
    var size = demo2.find(":selected").size();
    if(size > 3){
        demo2.find(":selected").each(function(ind, sel){            
            if(ind > 2)
                $(this).prop("selected", false)
        })
        demo2.bootstrapDualListbox('refresh', true);
    }
})

JSFIDDLE

Bootstrap Dual Listbox：如何限制所选选项

1 个答案: