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--”中选择一个选项时它会起作用，它会填充“---- Car name ----”中的其他选项示例：我选择“丰田”，现在ajax处理它并显示

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

现在，这里有一个问题。填充/更改两者（父类中的class =“bahan”=“par1”）和父类中的（class =“bahan”=“par2”）... 我想如果我在class =“par1”中选择选项，..它只在父类=“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); } }); }); });元素的兄弟

{{1}}

Answer 2

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

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

        });

Answer 3

使用此代码：

$(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) {
                $(this).next(".bahan").html(html);
            }
        });

    });

}）;

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

3 个答案: