jQuery multiple change select based on another select

Question

I created two blocks where I want to populate based on the first select. At this moment, only the first block is self-populating. I want both blocks to work independently. Thanks.

PS: The number of div.block is dynamic, they can be more or less than two blocks

cars = new Array("Mercedes", "Volvo", "BMW", "porche");
phones = new Array('Samsung', 'Nokia', 'Iphone');
names = new Array('Kasper', 'Elke', 'Fred', 'Bobby', 'Frits');
colors = new Array('blue', 'green', 'yellow');

populateSelect();

$(function() {
  $('#cat').change(function() {
    populateSelect();
  });
});


function populateSelect() {
  cat = $('#cat').val();
  $('#item').html('');
  eval(cat).forEach(function(t) {
    $('#item').append('<option>' + t + '</option>');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <select id="cat">
    <option val="cars">cars</option>
    <option val="phones">phones</option>
  </select>
  <select id="item">
  </select>
</div>
<div class="block">
  <select id="cat">
    <option val="names">names</option>
    <option val="colors">colors</option>
  </select>
  <select id="item">
  </select>
</div>

What is the eval doing here? That cannot be right... Also IDs need to be unique — mplungjan, Apr 26 '20 at 06:59
The number of blocks is dynamic, they can be more or less than two blocks. — Gomy, Apr 26 '20 at 07:01
I can't make it work. Can you please make a JSFiddle with it? — Gomy, Apr 26 '20 at 07:55

prathameshk73 · Answer 1 · 2020-04-26T12:41:27.360

This is how you can update your code to populate the items dropdowns dynamically. First of all try to avoid using duplicate Id's. I have renamed your cat id to cat-1 and cat-2 and applied a 'category' class. So binding a change event to class is good practice to avoid duplicating code. Populate your item dropdown using next jquery method.

var cars = new Array("Mercedes", "Volvo", "BMW", "porche");
        var phones = new Array('Samsung', 'Nokia', 'Iphone');
        var names = new Array('Kasper', 'Elke', 'Fred', 'Bobby', 'Frits');
        var colors = new Array('blue', 'green', 'yellow');

        $(function () {
            var allCategories = $('.categories');
            if (allCategories && allCategories.length > 0) {
                $.each(allCategories, function(index, category) {
                    populateSelect($(category));   
                });
            }

            $('.categories').change(function () {
                var selectEle$ = $(this);
                populateSelect(selectEle$);
            });
        });



        function populateSelect(selectEle$) {
           
            var cat = selectEle$.val();
            if (cat) {
               
                selectEle$.next().html('');
                eval(cat).forEach(function (t) {
                    selectEle$.next().append('<option>' + t + '</option>');
                });
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
        <select id="cat-1"class="categories">
            <option val="cars">cars</option>
            <option val="phones">phones</option>
        </select>
        <select id="item-1">
        </select>
    </div>
    <div class="block">
        <select id="cat-2" class="categories">
            <option val="names">names</option>
            <option val="colors">colors</option>
        </select>
        <select id="item-2">
        </select>
    </div>

So on page load you will not get those dropdowns prepopulated as there is no selected values in cat dropdown.

Please don’t use eval - see my comment to the question how to avoid eval — mplungjan, Apr 26 '20 at 08:16
prathameshk73 How could it on page load those dropdowns to be prepopulated with the values assigned to the first select .categories? — Gomy, Apr 26 '20 at 08:24
mplungjan I can't make it work. Can you please make a JSFiddle with it? — Gomy, Apr 26 '20 at 08:32
@Gomy Please check updated code for prepopulating firsr dropdown on page load. — prathameshk73, Apr 26 '20 at 08:37
@prathameshk73 Thanks, but updated code with populate only first dropdown, not all of them. Can you help me to populate all of them? — Gomy, Apr 26 '20 at 09:08
@Gomy Please check updated code. You need to iterate over all categories dropdown and call populateSelect function. — prathameshk73, Apr 26 '20 at 12:42

jQuery multiple change select based on another select

1 Answers1