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

Posted

技术标签:

【中文标题】如何使用 jQuery 交换选择字段中的所有选项【英文标题】:How to exchange all options within select field with jQuery 【发布时间】:2019-08-07 22:01:49 【问题描述】:

我在一个表单中有两个选择字段 - 品牌和型号。我的目标是在选择另一个品牌时更改字段“模型”的选项。例如。选择 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])
    );
)

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

如何实现?

【问题讨论】:

听起来你只需要在添加新选项的循环之前调用$('#filter_model').empty() 谢谢!通过一些补充来修复它: $('#filter_model').empty(); $('#filter_model').append('<option value="" selected>Auswählen</option>'); $('#filter_model').selectmenu("refresh", true); 【参考方案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);

【讨论】:

您正在将 jQuery 对象连接到循环内的字符串 @charlietfl 谢谢,我相信我现在已经解决了这个问题 也可以将对象数组传递给html() @charlietfl 哦,我不知道你能做到这一点。谢谢你通知我:) @NickParsons 不错的答案,直到现在我才意识到 .html 也像 .empty 一样清除 data事件处理程序做!我认为您的回答需要强调这一点。

以上是关于如何使用 jQuery 交换选择字段中的所有选项的主要内容,如果未能解决你的问题,请参考以下文章

如何使用jquery预填充字段

jQuery自动完成,通过选择建议选项填充多个字段

如何删除选择框的所有选项,然后添加一个选项并使用 jQuery 选择它?

如何使用 jQuery 获取选择的所有选项?

JQuery 设置选择的选项

JQuery刷新选择框