添加要选择的选项 - 多个选择

add options to select - multiple selects

本文关键字：选择 添加 选项      更新时间：2023-09-26

我有 4 个选择，我想使用他们的类将这些选项附加到所有 4 个选择中。 

// groupings is just an array of strings 
createElement: function(el, value, html) {
  var htmlText = html || value;
  var elm = document.createElement(el);
  elm.value = value;
  elm.innerHTML = htmlText;
  return elm;
}
var htmlOptions = [];
$.each(groupings, function(i, e) {
  htmlOptions.push(_util.createElement("option", e));
});

$('.groupBy_impact').append(htmlOptions);

这似乎在Chrome中有效，但在IE和Firefox中，这些值在选择框之外被过度覆盖。不知道为什么。

如果我执行以下操作，那么它可以跨浏览器工作，但我想避免它

$('#select_groupBy_impact_1').append(htmlOptions);
$('#select_groupBy_impact_2').append($(htmlOptions).clone());
$('#select_groupBy_impact_3').append($(htmlOptions).clone());
$('#select_groupBy_impact_4').append($(htmlOptions).clone());

如果你想避免克隆，这样的东西应该可以工作。

$('.groupBy_impact').each(function() {
    $(thid).append(htmlOptions);
});

这样可以避免克隆并循环访问集合中的所有元素。重要的是，您需要使用它的所有元素都具有groupBy_impact类。

此外，.append()可以采用不同的参数。

你正在使用jQuery，为什么不让你的.createElement();返回放入数组中的jQuery对象。 这将更容易让jQuery处理。

甚至更好。创建一个新的 jQuery 集合（而不是数组）并将创建的 jQuery 对象附加到该空的 jQuery 对象，实质上是创建一个要添加的 DOM 元素的新集合。

尝试这样的事情

        var htmlOptions_len = htmlOptions.length;
        for(var i= 0;i<htmlOptions_len;i++ ){
            $('.groupBy_impact').append(htmlOptions[i]);
        }

或者只是尝试这样的事情

        $.each(groupings, function(i, e) {
            $('.groupBy_impact').append(_util.createElement("option", e));
        });
相关文章：