我在表单中有两个选择字段 - 品牌和型号。我的目标是在选择另一个品牌时更改字段“模型”的选项。例如。选择宝马,显示所有宝马车型。
因此,我正在进行ajax调用以检索这些值,然后我想构建另一个表单。
构建选项的代码:
obj = JSON.parse(json);
$.each(obj.item, function(key,valueObj){
Object.keys(valueObj || {}).forEach(function(k) {
$('#filter_model').append(
$('<option></option>').val(k).html(valueObj[k])
);
})
这通过添加新选项来工作。但当然,随着我不断改变制作,它只会在选择字段中添加新模型。我要么需要删除所有现有的,要么以某种方式重建整个字段。后者将是我的偏好,因为我后来只想在选择make时显示模型字段。
怎么能实现这一目标?
在循环中追加并不是一个好主意,因为它是一个昂贵的运行操作。相反,您可以在循环中构建一个HTML字符串,然后使用#filter_model
方法将其设置为.html()
的内容(因此只修改DOM一次):
obj = JSON.parse(json);
var strHTML = "";
$.each(obj.item, function(key,valueObj) {
Object.keys(valueObj || {}).forEach(function(k) {
strHTML += '<option value="' + k +'">' + valueObj[k] +'</option>';
});
});
$('#filter_model').html(strHTML);
或者,或者,正如@charlietfl所建议的那样,您可以构建一个jQuery对象数组,然后在该数组上使用.html()
:
obj = JSON.parse(json);
var options = [];
$.each(obj.item, function(key,valueObj) {
Object.keys(valueObj || {}).forEach(function(k) {
options.push($('<option></option>').val(k).html(valueObj[k]));
});
});
$('#filter_model').html(options);