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。但对于我的项目案例，我需要＆＃34;对于＆＃34;方法

更新1-＆gt;更新jsfiddle

Answer 1

值被改组，因为你得到输入数组索引checkedText.value = selectobject[z].value;知道在更改事件中隐藏输入的顺序改变导致错误的值。（您可以通过设置测试选择显示来检查：页面覆盖后阻止）

在工作片段之上：

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

＆＃13;

$( 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);
    })
  }

＆＃13;

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

＆＃13;

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

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

从patosai树multiselect中获取选中的选中值

1 个答案: