Bootstrap 双列表框：如何限制所选选项

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 双列表框：如何限制所选选项

Bootstrap Dual Listbox : How to Limit Selected Option

css

jquery

listbox

twitter-bootstrap