如何使用 jQuery 交换选择字段中的所有选项

Question

我在一个表单中有两个选择字段 - 品牌和型号。我的目标是在选择另一个品牌时更改字段“模型”的选项。例如。选择 BMW，显示所有 BMW 车型。

因此，我正在执行 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])
    );
})

这是通过附加新选项来实现的。但当然，当我不断更改品牌时，它只会将新模型添加到选择字段中。我要么需要删除所有现有的，要么以某种方式重建整个字段。后一个是我的偏好，因为我以后只想在选择品牌时显示模型字段。

如何实现？

Answer 1

在循环中追加并不是一个好主意，因为它是一项昂贵的操作。相反，您可以在循环中构建一个 HTML 字符串，然后使用 .html() 方法将其设置为 #filter_model 的内容（因此只修改一次 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);