Question

正如标题所说我在删除或禁用选择选项树multiselect 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 tree multlectlect进行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
}

删除这两个元素。这是一个更新的小提琴，请自行检查：https://jsfiddle.net/htumxL5r/1/

如何删除或禁用patosai树multiselect

1 个答案: