CODEWITHSUNDEEP
jqueryselect
maali
maali

Reputation: 143

select2 Maximum call stack exceeded on dependent dropdown

i have tow dropdown the first one show the item by number ,and the second one show the item names so the user can select the item by item number or by item name and if he select item number another dropdown will update selected value her is my code

i create simple on change function to update another dropdown value

$('.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>

any one could help me i will appreciate it

Upvotes: 2

Views: 5705

Answers (2)

Ehsan
Ehsan

Reputation: 12969

Change like this :

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

Final code :

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

Upvotes: 0

Eddi
Eddi

Reputation: 821

Setting the value of the select2 dropdown triggers the change event, causing an endless loop. So you have to have a case for that. Something like this:

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

 });

Upvotes: 5

Related Questions