Question

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

因此，我正在执行ajax调用以检索这些值，然后我要构建其他表单。

用于构建选项的代码：

  obj = JSON.parse（json）;
$ .each（obj.item，function（key，valueObj）{
    Object.keys（valueObj || {}）。forEach（function（k）{
    $（'＃filter_model'）。append（
            $（''）。val（k）.html（valueObj [k]）
    ）;
}）

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

如何做到这一点？

Answer 1

在循环中追加不是一个好主意，因为它是运行昂贵的操作。相反，您可以在循环中构建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);

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

1 个答案: