从patosai树多选中获取选定的检查值

Question

我试图从已选中的复选框中获取值，但由于某种原因，该值以某种奇怪的模式打乱了

这里jsfiddle（尝试检查水果然后点击禁用）

<input id="checkedTree" type="text"/>
<select id="test-select" onchange="getCheckedTree()">
  <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>

我需要知道它为什么会发生，以及如何解决它。我确实知道获得正确价值的另一种方法like this。但对于我的项目案例，我需要“for”方法

更新 1-> 更新 jsfiddle

Answer 1

值被打乱了，因为您知道输入数组索引checkedText.value = selectobject[z].value; 在更改事件中隐藏输入的顺序发生更改，这会导致错误的值。 （您可以通过设置 test-select display :block after page loding 来检查）

在工作的 sn-p 之上：

请注意，您可以将值 (1,2,3..) 直接传递给 checkedTree 输入以禁用直接输入。

$( document ).ready(function() {
    var $select = $('#test-select');
		$select.treeMultiselect({ 
        enableSelectAll: true,
        sortable: false, 
        searchable: true,
        startCollapse: true
    });
  
});

  
function getCheckedTree(){
    var tempCtr=0;
    var $checkedText = $("#checkedTree");

    var selectobject = $("[id*=treemultiselect-0-]:checked");
    $checkedText.val("");
    for(i=0;i<selectobject.length;i++) {
      if(tempCtr==0){
        tempCtr=1;
        $checkedText.val($(selectobject[i]).parent().data("value"));
      }else{
        $checkedText.val($checkedText.val() + $(selectobject[i]).parent().data("value"));
      }
    }
  }
  function funcDis(){
      var $checkedText = $("#checkedTree");
      if($checkedText.val().length>0) {
      	$checkedText.val().split("").forEach(function(val){
        	$(".tree-multiselect .item[data-value="+val+"] input").prop('disabled', true);
        	$("#test-select option[value="+val+"]").prop('disabled', true);
        })
      };

  }
  
  function enableAll(){
  	$(".tree-multiselect input").each(function(idx){
    	$(this).prop('disabled', false);
      var val = $(this).parent().data("value");
      $("#test-select option[value="+val+"]").prop('disabled', false);
    })
  }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.css" rel="stylesheet"/>
<script src="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.js"></script>

<input id="checkedTree" type="text"/> <button onclick="funcDis()">disable</button><button onclick="enableAll()">enable all</button>
<select id="test-select" onchange="getCheckedTree()">
  <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>

PS：您可以直接将一个值数组传递给 funcDis 并在启动时禁用输入。

就是这样，如果你愿意，我fiddle。