我正在进行一个 ajax 调用,我想根据结果修改一个选择框。我遇到的问题是 dom 元素在 ajax 调用内部没有范围,所以我找不到它的兄弟姐妹并用数据修改它们。为了澄清看下面的html
<div class="field_group">
<select name="example1">
<option value="something">something</option>
</select>
<select name="example2">
<option value="something">something</option>
</select>
</div>
基本上,当示例 1 更改时,我会修改示例 2 的数据。重要的是要注意,在任何情况下我都不能使用某种直接选择器来解决我的问题,因为此页面上的所有字段都是动态选择的,并且可能有 0 到 1000 个。下面是我的实际代码
$(".landscape_type").on('change',function(){
var my_landscape_type = $(this);
console.log($(this).val());
var product_category = $(this).val();
$.post('/quotes/ajax_get_quote_products/'+product_category, function(data,my_landscape_type) {
var data_object = JSON.parse(data);
console.log(data_object);
console.log('should output here');
console.log(my_landscape_type.val());
if(data_object["error"]) {
alert(data_object["error"]);
my_landscape_type.parents('.field_group').children(".landscape_product").empty();
my_landscape_type.parents('.field_group').children(".landscape_product").append("<option selected='selected' value='-1'>No Products Found!</option>");
} else {
my_landscape_type.parents('.field_group').children(".landscape_product").empty();
my_landscape_type.parents('.field_group').children(".landscape_product").append("<option selected='selected' value='-1'>Select a Product...</option>");
for (index in data_object) {
my_landscape_type.parents('.field_group').children(".landscape_product").append("<option value='"+data_object[index]["product_id"]+"'>"+data_object[index]["product_name"]+"</option>");
console.log(data_object[index], index);
}
}
});
});
如果您查看应该在此处输出的行下方,您可以看到我应该在哪里获取 my_landscape_type 的值,但由于我没有得到它,它已经失去了范围并以我的方式传递它不起作用。