使用预选项目填充Bootstrap dual列表框

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <select id="select1" multiple="multiple">
        <!-- 可选项目将在这里填充 -->
      </select>
    </div>
    <div class="col-md-2">
      <button id="btn-add" class="btn btn-primary">添加</button>
      <button id="btn-remove" class="btn btn-primary">移除</button>
    </div>
    <div class="col-md-5">
      <select id="select2" multiple="multiple">
        <!-- 已选项目将在这里填充 -->
      </select>
    </div>
  </div>
</div>

var options = ["项目1", "项目2", "项目3"]; // 可选项目数据

var select1 = document.getElementById("select1");

for (var i = 0; i < options.length; i++) {
  var option = document.createElement("option");
  option.text = options[i];
  select1.add(option);
}

var btnAdd = document.getElementById("btn-add");
var btnRemove = document.getElementById("btn-remove");
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

btnAdd.addEventListener("click", function() {
  for (var i = 0; i < select1.options.length; i++) {
    if (select1.options[i].selected) {
      select2.add(select1.options[i]);
      i--;
    }
  }
});

btnRemove.addEventListener("click", function() {
  for (var i = 0; i < select2.options.length; i++) {
    if (select2.options[i].selected) {
      select1.add(select2.options[i]);
      i--;
    }
  }
});