2

我有这样的表格：

<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----”中填充其他选择选项示例：我选择“Toyota”，现在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"中选择选项，我想要， ..它只填充了父类=“par1”的class=“bahan”中的选项，而不是par1和par2中的选项

4

3 回答 3

2

$(".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);
            }
        });

    });
});
于 2013-09-24T03:41:13.207 回答
1 
$(".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);
                }
            });

        });
于 2013-09-24T03:41:13.430 回答
0

使用此代码：

$(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);
            }
        });

    });

});

于 2013-09-24T03:58:49.417 回答