在多次迭代中根据 select 更改 select 选项

Question

我有一个 select，它根据 selected 选项影响了其他两个 select 的选项（它们之间也相互影响）。到目前为止，这工作正常。这是我的代码：

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

我不得不更改它，这样我将重复相同的代码 X 次（取决于用户设置的输入），而不是仅一次，所有这些都将具有相同的三个 selects 里面，这将有相同的选项。所以它现在看起来像这样：

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

问题是，使用我的代码，每当我设置任何 .tipo 选项时，它都会影响所有 X .num-a 和 .num-n selects（也改变任何.num-a 的影响所有 .num-n 和反之亦然），当它应该只影响相应的第 n 个 selects.

的选项时

我必须将第一个 on("change") 更改为 $(document).on('change') 才能识别 select（在另一个用户回答中找到），所以脚本的第一行现在是：

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

我对 js 不是很好，所以这可能是显而易见的事情，但我尝试了几种方法但无法使其工作。

Answer 1

由于您的 html 代码中有多个 select，因此仅引用所需的 select，您可以使用 .closest() 这将获得最接近的 div 例如：sel-val 然后使用 .find 方法找到 select-box，您需要在其中添加新选项

演示代码 :

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

在多次迭代中根据 select 更改 select 选项

Change select options based on a select from within multiple iterations

javascript

jquery

html-select