javascript - 从 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>

我需要知道为什么会发生，以及如何解决它。我知道另一种获得适当值(value)的方法like this .但是对于我的元素案例，我需要“for”方法

更新1->更新jsfiddle

Answer 1

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

上面的工作片段:

请注意，您可以将值 (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如果你愿意的话。