使用 bsmultiselect 的两个同步选择

Question

又是我 :)

我一直想知道如何使用 html 标签“select”而不是 div 来制作两个同步的 bsmultiselect，因为我需要通过表单发送信息。这是代码。我想要的是使它成为“选择”而不是“div”

var options = [

  { text: 'item1', value: 'item1', selected: true},
  { text: 'item2', value: 'item2', selected: false},
  
];

function isValidSelection(v) {
    return true;
    // RP: simplified since sensce of current filter is unclear
    /*var l = options.filter(function (item) {
        return item.selected == true;
    }).length;
    var r = (!v) || (v && l == 0);
    return r;*/
}

var classeGramatical1 = null;
var classeGramatical2 = null;
let isclasseGramatical2 = true;
var $classesGramaticais = $('.classeGramatical1')
if (isclasseGramatical2)
    $classesGramaticais = $classesGramaticais.add('.classeGramatical2')

var install = function () {
    $classesGramaticais.bsMultiSelect({
        options: options,
        setSelected: function (o, v) {
            if (isValidSelection(v)) {
                o.selected = v;
                return true;
            }
            else {
                return false;
            }
        }
    });
    if (isclasseGramatical2) {
        $('.classeGramatical1').on('dashboardcode.multiselect:change', function () {
            $('.classeGramatical2').bsMultiSelect("UpdateOptionsSelected");
        })
    }

}
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="Classe">Classe:</label>
<div class="classeGramatical1" multiple="multiple"required></div>

<label class="control-label" for="Classe">Classe:</label>
<div class="classeGramatical2" multiple="multiple"required></div>

Answer 1

如果您需要通过表单发送两个<select>：

1. 创建两个选择，并在它们之上创建两个 bsMultiSelect
2. 处理setSelected上的数据-设置<option>selected属性（或创建新选项）
3. 将更改推送到相关BsMultiSelect（使用UpdateOptionsSelected ir UpdateData 或其他pushers）

如果您需要使用表单发送一个<select>（而第二个 bsMultiSelect 仅用于某些数据操作）：

1. 在<select> 上创建一个bsMultiSelect，在div 上创建第二个 1b）第二个启动配置{options: $('#mySelect < option').toArray() }
2. 都一样：更改数据，然后推送更改。如果您更改自己的 bsMultiSelect 数据（不是其他数据），则在新事件循环中使用 UpdateOptionsSelected 推送更改 window.setTimeout(,0);