时间戳

首页 > 解决方案 > bsmultiselect 在 div 上一次选择一个选项

javascript - bsmultiselect 在 div 上一次选择一个选项

问题描述

我试图在我的多选中使用“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>

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

标签： javascriptbootstrap-4bsmultiselect

解决方案

仅适用于“单选”：

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

推荐阅读