使用bsmultiselect的两个同步选择

Question

这又是我:)

我一直想知道如何使用html标签"select“而不是div来创建两个同步的bsmultiselect，因为我需要通过表单发送信息。这是代码。我想要的是让它成为"select“而不是"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>与表单一起发送：

在them

• manipulate data on

1. 上创建两个selects和两个新选项- set

setSelected<option>selected attribute (或create

1. options)将更改推送到relatedBsMultiSelect (使用UpdateOptionsSelected ir UpdateData或其他选项

如果您需要将一个<select>与表单一起发送(第二个bsMultiSelect仅用于某些数据管理)：

1. 在<select>上创建一个bsMultiSelect，在div上创建第二个。1b)使用相同的configuration {options: $('#mySelect < option').toArray() }
2. all启动第二个and :更改数据，然后推送更改。如果您更改了自己的bsMultiSelect数据(而不是其他数据)，请在新的事件循环window.setTimeout(,0);

中使用UpdateOptionsSelected推送更改