select2最大コールスタックが従属ドロップダウン時に超えました

私はトウドロップダウンを最初に表示し、番号で項目を表示し、2番目に項目名を表示するので、項目番号または項目名で項目を選択できます。別のドロップダウンは、私はいずれかが私にIWを助けることができる別のドロップダウン値にselect2最大コールスタックが従属ドロップダウン時に超えました

$('.select').select2({ 
 
    "width":"100px" 
 
}); 
 

 

 
$(document).on("change", "#block_name", function() { 
 
    id = $(this).val(); 
 
    $("#block_number").select2('val',id); 
 
}); 
 

 
$(document).on("change", "#block_number", function() { 
 
    id = $(this).val(); 
 
    $("#block_name").select2('val',id); 
 

 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<select name="block" id="block_name" class="select"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 

 
</select> 
 

 
<select name="block_number" id="block_number" class="select"> 
 
    <option value="1">block1</option> 
 
    <option value="2">block2</option> 
 
    <option value="3">block3</option> 
 
    <option value="4">block4</option> 
 
    <option value="5">block5</option> 
 
</select>

を更新するために、変更機能に簡単な作成、彼女は私のコード

で選択した値を項目番号を更新します

出典

2016-08-23 maali

select2ドロップダウンの値を設定すると、変更イベントがトリガされ、無限ループが発生します。だからあなたはそれのためのケースを持っている必要があります。

$('.select').select2({ 
    "width":"100px" 
}); 


$(document).on("change", "#block_name", function() { 
    id = $(this).val(); 
    if($("#block_number").val() != id){ 
     $("#block_number").select2('val',id); 
    } 
}); 

$(document).on("change", "#block_number", function() { 
    id = $(this).val(); 
    if($("#block_name").val() != id){ 
     $("#block_name").select2('val',id); 
    } 

});

出典

2016-08-23 07:32:11 Eddi

そんなにその今細かい作業 – maali

このような変更：

$(document).ready(function(){ 
    $('.select').css({width:100}); 

    $("#block_name").on("change", function() { 
     id = $(this).val(); 
     $("#block_number option[value = " + id + "]").prop("selected",true); 
    }) 

    $("#block_number").on("change", function() { 
     id = $(this).val(); 
     $("#block_name option[value = " + id + "]").prop("selected",true); 
    }) 
})

決勝コード：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
</head> 
 
<body> 
 
    <select name="block" id="block_name" class="select"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 

 
</select> 
 

 
<select name="block_number" id="block_number" class="select"> 
 
    <option value="1">block1</option> 
 
    <option value="2">block2</option> 
 
    <option value="3">block3</option> 
 
    <option value="4">block4</option> 
 
    <option value="5">block5</option> 
 
</select> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
$(document).ready(function(){ 
 
    $('.select').css({width:100}); 
 
    
 
    $("#block_name").on("change", function() { 
 
     id = $(this).val(); 
 
     $("#block_number option[value = " + id + "]").prop("selected",true); 
 
    }) 
 
    
 
    $("#block_number").on("change", function() { 
 
     id = $(this).val(); 
 
     $("#block_name option[value = " + id + "]").prop("selected",true); 
 
    }) 
 
}) 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-23 07:46:07 Ehsan

@maaliをありがとう、小切手このような何か私の答え！ – Ehsan

あまりにも@あなたのコードを動作していただきありがとうございますが、私はエディソリューションを使用 – maali

select2最大コールスタックが従属ドロップダウン時に超えました

答えて

関連する問題