bsmultiselect 在 div 上一次选择一个选项答案

【问题标题】：bsmultiselect Select one option at a time on divbsmultiselect 在 div 上一次选择一个选项
【发布时间】：2021-01-20 19:49:44
【问题描述】：

我试图在我的多选中使用“setSelected”选项，但我注意到这不适用于 div（至少我自己无法达到它）。我正在尝试使用以下示例进行两个同步的多选：https://dashboardcode.github.io/BsMultiSelect/snippetJs.html，但仅使用最后两个输入。

var options = [


       { text: 'item1', value: 'item1'},
       { text: 'item2', value: 'item2'},

   ];


    var teste1 = null;
    var teste2 = null;
    let isTeste2 = true;
    var $testes = $('#teste1-id')
    if (isTeste2)
        $testes = $testes.add('#teste2-id')


    var install = function () {
        $testes.bsMultiSelect({
            options: options
        });
        if (isTeste2) {
            $('#teste1-id').on('dashboardcode.multiselect:change', function () {
                $('#teste2-id').bsMultiSelect("UpdateOptionsSelected");
            })
        }

    }
    install();
    
    $("#btn").click(
       function(){
          options[0].selected = true;
          var api1 = $testes.BsMultiSelect();
          api1.updateOptionSelected(0);    
       }
    )

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.6.28/dist/js/BsMultiSelect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<label class="control-label" for="teste1-id">Teste1</label>
    <div id="teste1-id"></div>

    <label class="control-label" for="teste2-id">Teste2:</label>
    <div id="teste2-id"></div>

<br/>
<button id="btn">Click Me</button>

你能帮我找到解决办法吗？

【问题讨论】：

将 jQuery 和 BsMultiSelect 库添加到您的 sn-p 中
我已经添加了它们（库），现在你能重复一下它有什么问题吗？一切正常，但您的 sn-p 中没有“setSelected”调用。
很抱歉没有添加库。我的意思是，我想一次选择一个选项，而不是多个选项。 “setSelected”代码看起来可以解决问题，但它没有得到应用。如果你愿意，我仍然可以把它塞进去。
答案已更新。现在 setSelected 展示了如何“一次选择一个选项，而不是多个选项”

标签： javascript bootstrap-4 bsmultiselect

【解决方案1】：

仅适用于“单选”：

var options = [
       { text: 'item1', value: 'item1', selected: true},
       { text: 'item2', value: 'item2', selected: false},
];

function isValidSelection(v){
    var l = options.filter(function(item){
         return item.selected==true;
    }).length;
    var r = ( !v ) || (v && l==0);
    return r;
}

var teste1 = null;
var $teste1 = $('#teste1-id')

var install = function () {
   $teste1.bsMultiSelect({
       options: options,
       setSelected: function(o,v){
           if (isValidSelection(v)){
              o.selected = v;
              return true;
           }
           else{
              return false;
           }
       }
   });
}
install();

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.6.28/dist/js/BsMultiSelect.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<label class="control-label" for="teste1-id">Test it (only one select allowed)</label>
    <div id="teste1-id"></div>
<br/>

【讨论】：

感谢您的关注！我肯定会测试它。非常感谢！
@JulioFraga 已更新。现在 'setSelected' 展示了如何控制所选项目的数量