我有这样的表格:
<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
最佳答案
您不需要定位所有 $(".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);
}
});
});
});
关于jquery - 动态填充其他选择选项,但我希望它仅显示在同一个父类中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18972577/