Question

我有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());

Answer 1

如果您想避免克隆，这样的事情应该有用。

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

这可以避免克隆并遍历集合中的所有元素。重要的是，您需要使用此元素的所有元素都具有groupBy_impact类。

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

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

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

Answer 2

尝试这样的事情

        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));
        });

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

2 个答案: