jquery - 动态填充其他选择选项，但我希望它仅显示在同一个父类中

Question

我有这样的表格:

<form action="index.php" method="get" name="gizi">
<div class="par1">
  <select name="jenis" class="jenis">
    <option selected="selected">--Merk--</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Honda</option>

  </select>
  <select name="bahan" class="bahan">
    <option selected="selected">--Car name--</option>
  </select>
</div>
<div class="par2">
  <select name="jenis" class="jenis">
    <option selected="selected">--Merk--</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Honda</option>
  </select>
  <select name="bahan" class="bahan">
    <option selected="selected">--Car name--</option>
  </select>
</div>

</form>

我的脚本如下所示:

$(document).ready(function() {
        $(".jenis").change(function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;

            $.ajax({
                type: "POST",
                url: "ajax_menu.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $(".bahan").html(html);
                }
            });

        });
            });

当我在“--Merk--”中选择一个选项时，它会起作用，它会填充“----汽车名称----”中的其他选择选项示例:我选择“丰田”，现在ajax处理它并显示

<select name="bahan" class="bahan">
  <option value"1">Avanza</option>
  <option value"2">Kijang</option>
  <option value"3">Innova</option>
</select>

现在，这里有一个问题。 (父类=“par1”中的 class=“bahan”)和(父类=“par2”中的 class=“bahan”)都被填充/更改...我想如果我选择 class="par1"中的选项，..它只填充父 class="par1"中 class="bahan"中的选项，而不是同时填充 par1 和 par2

Answer 1

您不需要定位所有 $(".bahan") 元素，而是需要定位 bahan，它是已更改 jenis 的同级元素> 元素

$(document).ready(function() {
    $(".jenis").change(function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var $this = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $this.siblings(".bahan").html(html);
                //or $this.next().html(html);
            }
        });

    });
});