Bootstrap双列表框：如何限制所选选项 [英] Bootstrap Dual Listbox : How to Limit Selected Option

问题描述

我使用Bootstrap Dual Listbox来帮助用户选择一些选项。您可以在这里查看插件： http://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox 。

I'm using Bootstrap Dual Listbox to help user choose some option. You can see the plugin here: http://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox.

我已经在我的项目中添加了插件。它的成功。

I have add the plugin on my project. It's success. But i got a problem when try to make a limit when user choose the option.

例如：
有一些选项，比如：

Example: There are some option, like:

• Apple


• Mango


• Orange


• Melon


• Guava

• Apple
• Mango
• Orange
• Melon
• Guava

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

User must choose 3 option. You can't choose 1,2,4, or 5.

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

The problem is about to limit the option can be choose. By default, the user is not limited to choose.

这是我的部分代码：

<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>

如果您有同样的问题，请在这里分享。先谢谢了！

If you have same problem, let share here. Thanks in advanced!

推荐答案

1. 使用事件更改 li>
   
2. 计数所选值


3. 如果超过三个，取消选择其余


4. 使用函数 refresh

1. use event change
2. count the selected values
3. if there are more than three deselect the rest
4. use function 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双列表框：如何限制所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！