时间戳

首页 > 解决方案 > 将选项附加到引导双重列表

javascript - 将选项附加到引导双重列表

问题描述

var demo2 = $('#tree_listbox').bootstrapDualListbox({
  nonSelectedListLabel: 'Non-selectedsss',
  selectedListLabel: 'Selected',
  moveOnSelect: false,
});

var data = [
  {
    "id": 194,
    "name": "Endüstri Mühendisliği",
    "selected": true
  },
  {
    "id": 201,
    "name": "Bilgisayar Mühendisliği",
    "selected": false
  }
]

$.each(data, function(i, item) {
  let $option = $(`<option value=${item.id}>${item.name}</option>`);
  $option.prop('selected', item.selected);
  demo2.append($option);
});

demo2.trigger('bootstrapduallistbox.refresh', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.2/jquery.bootstrap-duallistbox.min.js" integrity="sha512-l/BJWUlogVoiA2Pxj3amAx2N7EW9Kv6ReWFKyJ2n6w7jAQsjXEyki2oEVsE6PuNluzS7MvlZoUydGrHMIg33lw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.2/bootstrap-duallistbox.css" integrity="sha512-8TCY/k+p0PQ/9+htlHFRy3AVINVaFKKAxZADSPH3GSu3UWo2eTv9FML0hJZrvNQbATtPM4fAw3IS31Yywn91ig==" crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.2/bootstrap-duallistbox.min.css" integrity="sha512-BcFCeKcQ0xb020bsj/ZtHYnUsvPh9jS8PNIdkmtVoWvPJRi2Ds9sFouAUBo0q8Bq0RA/RlIncn6JVYXFIw/iQA==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.2/jquery.bootstrap-duallistbox.js" integrity="sha512-hRO4YVWE+x8AYSMHzjmUDFvzGu6hBQKaTfMHACH+mmrbQj34rbHpgMqo/9yQvl1GibrxqxvTB6P0oClLGHKzsw==" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <input type="hidden" id="selected_item" name="selected_item" />

      <select multiple="multiple" size="10" class="   " id="tree_listbox" name=" ">

      </select>

    </div>

  </div>
</div>

我正在尝试使用 ajax 从数据库中检索数据并将数据附加到引导双重列表中，但问题是当项目的属性选择为 true 时我无法附加到所选列表这是我定义双重列表框的方式

 var demo2 = $('.demo2').bootstrapDualListbox({
     nonSelectedListLabel: 'Non-selected',
     selectedListLabel: 'Selected',
     preserveSelectionOnMove: 'moved',
     moveOnSelect: false,
     nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
 });

这是我的代码

 $('#selected_item').val(id);
     $.getJSON("/admin/ISIM/Get_Tree", {Mngid:Mngid,item_id:id},function (data) {
         $('#tree_listbox').empty();

         var items;
         $.each(data, function (i, item) {
             console.log(item);
             var o = document.createElement("option");
             if(item.selected==true)
              var o=   "<option value='" + item.id + "' selected >" + item.name + "</option>"
             else
                 var o=   "<option value='" + item.id + "'>" + item.name + "</option>"
             console.log(o);

           demo2.append(o)

       </option>");
         });

     })

但是这段代码实际上并没有附加到选定的列表中，它只是突出显示鼠标选择的选定项目，而不是将其插入选定的

标签： javascriptjquerybootstrap-4bootstrap-duallistbox

解决方案

添加选项元素后触发refresh功能并将第二个参数设置trigger为true取消选择所有亮点。

$('#selected_item').val(id);
$.getJSON("/admin/ISIM/Get_Tree", {Mngid:Mngid,item_id:id},function (data) {
  $('#tree_listbox').empty();

  $.each(data, function(i, item) {
    let $option = $(`<option value="${item.id}">${item.name}</option>`);
    $option.prop('selected', item.selected);
    demo2.append($option);
  });

  demo2.bootstrapDualListbox('refresh', true);
});

推荐阅读