CODEWITHSUNDEEP
javascriptjqueryhtml-select
Alpa
Alpa

Reputation: 53

Change select options based on a select from within multiple iterations

I had a select which, depending on the selected option, affected the options from two other selects (which also affected each other between themselves). So far, this was working fine. Here is the code I had:

HTML

<div id="sel" class="sel-val">
    <div class="row">
        <div class="col">
            <select class="tipo" name="tipo">
                <option selected>Select an option</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div class="col">
            <select class="num-a" name="num-a">
                <option value="0" selected>0</option>
            </select>
        </div>
        <div class="col">
            <select class="custom-select num-n" name="num-n">
                <option value="0" selected>0</option>
            </select>
        </div>
    </div>
</div>

JS

$('.tipo').on("change", function() {
    var val = $(this).val();
    $(".num-a").html(options1[val]);
    $(".num-n").html(options2[val]);
    if (val == 1) {
        $('.num-a').on("change", function() {
            var vara = $(this).val();
            $(".num-n").html(optionsIn[vara]);
        });
        $('.num-n').on("change", function() {
            var varn = $(this).val();
            $(".num-a").html(optionsIn[varn]);
        });
    }
    if (val == 2) {
        // same with different arrays
    }
    if (val == 3) {
        // same with different arrays
    }
    if (val == 4) {
        // same with different arrays
    }
});
var options1 = [
    array with options 1
];
var options2 = [
    array with options 2
];
etc ...

I had to change it, so that instead of only one time, I will have this same code repeated X number of times (depending on an input set by the user), all of which will have the same three selects inside, which will have the same options. So it now looks something like this:

<div id="sel-1" class="sel-val">
    <div class="row">
        <div class="col">
            <select class="tipo" name="tipo-1">
                options...
            </select>
        </div>
        <div class="col">
            <select class="num-a" name="num-a-1">
                <option value="0" selected>0</option>
            </select>
        </div>
        <div class="col">
            <select class="custom-select num-n" name="num-n-1">
                <option value="0" selected>0</option>
            </select>
        </div>
    </div>
</div>
...
<div id="sel-X" class="sel-val">
    <div class="row">
        <div class="col">
            <select class="tipo" name="tipo-X">
                options...
            </select>
        </div>
        <div class="col">
            <select class="num-a" name="num-a-X">
                <option value="0" selected>0</option>
            </select>
        </div>
        <div class="col">
            <select class="custom-select num-n" name="num-n-X">
                <option value="0" selected>0</option>
            </select>
        </div>
    </div>
</div>

The problem is that with the code I have, whenever I set any of the .tipo options, it affects all of the X .num-a and .num-n selects (also changing any of the .num-a affects all of the .num-n and viceversa), when it should only affect the options of the corresponding nth selects.

I had to chang the first on("change") to $(document).on('change') for the selects to be recognized (found it on another user answer), so the first line of the script is now:

$(document).on('change','.tipo-habitacion-sel', function() {

I'm not very good with js, so this may be something obvious, but I tried several things and can't make it work.

Upvotes: 1

Views: 82

Answers (1)

Swati
Swati

Reputation: 28522

As there mutiple selects in your html code so to refer only the required selects you can use .closest() this will get the closest div eg : sel-val and then use .find method to find select-box where you need append new options

Demo Code :

$(document).on('change', '.tipo', function() {

  var val = $(this).val();
  //get closest div with class sel-val
  var selector = $(this).closest(".sel-val")
  //then use find to get required select refernce
  selector.find(".num-a").html("<option>0</option><option value='1' >1</option>");
  selector.find(".num-n").html(" <option>0</option><option value='1' >1</option>");


  //other codes.

});

$(document).on('change', '.num-a', function() {

  var vara = $(this).val();
  var selector = $(this).closest(".sel-val")
  // $(".num-n").html(optionsIn[vara]);
  selector.find(".num-n").html("<option>0</option><option value='2'>2</option>");
});

$(document).on('change', '.num-n', function() {

  var varn = $(this).val();
  var selector = $(this).closest(".sel-val")
  //$(".num-a").html(optionsIn[varn]);
  selector.find(".num-a").html("<option>0</option><option value='3'>3</option>");

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="sel-1" class="sel-val">
  <div class="row">
    <div class="col">
      <select class="tipo" name="tipo-1">
        <option value="0">0</option>
        <option value="4">4</option>
      </select>
    </div>
    <div class="col">
      <select class="num-a" name="num-a-1">
        <option value="0" selected>0</option>
      </select>
    </div>
    <div class="col">
      <select class="custom-select num-n" name="num-n-1">
        <option value="0" selected>0</option>
      </select>
    </div>
  </div>
</div>
<hr>
<div id="sel-X" class="sel-val">

  <div class="row">
    <div class="col">
      <select class="tipo" name="tipo-X">
        <option value="0">0</option>
        <option value="4">4</option>
      </select>
    </div>
    <div class="col">
      <select class="num-a" name="num-a-X">
        <option value="0" selected>0</option>
      </select>
    </div>
    <div class="col">
      <select class="custom-select num-n" name="num-n-X">
        <option value="0" selected>0</option>
      </select>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions