patoshai tree multiselectを削除または無効にする方法

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"; 
    } 

証拠その作業、私がチェックしたときに、それらのリンゴとアボカドがnullの取得値...

はところで、2は同じでpatosaiツリーの複数選択を使用して選択させるためにどのような方法がありますページ？どうやって？

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 
} 

これらの2つの要素を削除します。 https://jsfiddle.net/htumxL5r/1/