javascript - 如何删除或禁用 patosai 树多选

Question

正如标题所说 我在删除或禁用选择选项树多选 patosai 时遇到问题。实际上，禁用或删除正在工作，但显示未重新渲染。 任何想法？在这里jsfiddle

<input id="checkedTree" type="text"/>
<select id="test-select">
  <option value="1" data-section="fruit">Banana</option>
  <option value="2" data-section="fruit">Apple</option>
  <option value="3" data-section="fruit">Avocado</option>
  <option value="4" data-section="fruit">Pineapple</option>
  <option value="5" data-section="fruit">PenPineappleApplePen</option>
  <option value="6" data-section="animal">Tiger</option>
  <option value="7" data-section="animal">Lion</option>
  <option value="8" data-section="animal">Pitbull</option>
  <option value="9" data-section="animal">OrangUtan</option>
  <option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>

<button id="dis" onclick = "disableSelect()">
Remove apple and avocado
</button>

    $( document ).ready(function() {
    var $select = $('#test-select');
    $select.treeMultiselect({ 
    enableSelectAll: true,
    sortable: false, 
    searchable: true,
    startCollapse: true,
    onChange:function(){
        if ($select.val() != null){
            document.getElementById("checkedTree").value = $select.val();
        }else{
            document.getElementById("checkedTree").value = "";
        }   
    }

    });

});


  function disableSelect(){
  document.getElementById("test-select").remove(2);
  document.getElementById("test-select").remove(2); 
    //document.getElementById("checkedTree").value = "success";
  }

证明它有效，当我检查那些苹果和鳄梨时得到的值是空......

顺便说一句，有没有办法在同一页面上使用 patosai 树多重选择进行 2 个选择？怎么办？

Answer 1

该库实际上更改了选择框的 HTML 结构。您已提供此内容

<select id="test-select">
  <option value="1" data-section="fruit">Banana</option>
  <option value="2" data-section="fruit">Apple</option>
  <option value="3" data-section="fruit">Avocado</option>
  <option value="4" data-section="fruit">Pineapple</option>
  <option value="5" data-section="fruit">PenPineappleApplePen</option>
  <option value="6" data-section="animal">Tiger</option>
  <option value="7" data-section="animal">Lion</option>
  <option value="8" data-section="animal">Pitbull</option>
  <option value="9" data-section="animal">OrangUtan</option>
  <option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>

但是当使用patosai的插件时，就变成了下面这样

<div class="section" data-key="0">
  <div class="title"><span class="collapse-section">-</span>
    <input class="section" type="checkbox">fruit</div>
  <div class="item" data-key="0" data-value="1">
    <input class="option" type="checkbox" id="treemultiselect-0-0">
    <label for="treemultiselect-0-0">Banana</label>
  </div>
  <div class="item" data-key="3" data-value="4">
    <input class="option" type="checkbox" id="treemultiselect-0-3">
    <label for="treemultiselect-0-3">Pineapple</label>
  </div>
  <div class="item" data-key="4" data-value="5">
    <input class="option" type="checkbox" id="treemultiselect-0-4">
    <label for="treemultiselect-0-4">PenPineappleApplePen</label>
  </div>
</div>
<div class="section" data-key="1">
  <div class="title"><span class="collapse-section">-</span>
    <input class="section" type="checkbox">animal</div>
  <div class="item" data-key="5" data-value="6">
    <input class="option" type="checkbox" id="treemultiselect-0-5">
    <label for="treemultiselect-0-5">Tiger</label>
  </div>
  <div class="item" data-key="6" data-value="7">
    <input class="option" type="checkbox" id="treemultiselect-0-6">
    <label for="treemultiselect-0-6">Lion</label>
  </div>
  <div class="item" data-key="7" data-value="8">
    <input class="option" type="checkbox" id="treemultiselect-0-7">
    <label for="treemultiselect-0-7">Pitbull</label>
  </div>
  <div class="item" data-key="8" data-value="9">
    <input class="option" type="checkbox" id="treemultiselect-0-8">
    <label for="treemultiselect-0-8">OrangUtan</label>
  </div>
  <div class="item" data-key="9" data-value="10">
    <input class="option" type="checkbox" id="treemultiselect-0-9">
    <label for="treemultiselect-0-9">Marsupilami Yellow cartoon</label>
  </div>
</div>

这意味着您必须以不同的方式选择元素。我已经检查了该文件，您需要的是以下内容；

function disableSelect() {
  $('.item[data-value="2"]').remove(); // removes apple
  $('.item[data-value="3"]').remove(); // removes avocado
}

删除这两个元素。这是一个更新的 fiddle ，您可以自己检查一下:https://jsfiddle.net/htumxL5r/1/