从数组中生成选择选项并通过与另一个数组（jQuery）进行比较来选择多个元素答案

【问题标题】：Generate select options from array and select multiple element by comparing with another array (jQuery)从数组中生成选择选项并通过与另一个数组（jQuery）进行比较来选择多个元素
【发布时间】：2012-07-09 07:56:10
【问题描述】：

我想做的是为 JavaScript 数组中的多个 select 下拉列表生成 option 元素。在下拉列表中选择与另一个数组中的值相同的每个选项（示例中为 results 数组）。

问题在于，当结果数组有多个元素时，HTML 中的原始选项会乘以结果数组中的元素数。

我明白为什么会这样，但我似乎找不到比我目前使用的更好的解决方案，就像这样：

var
options = ['Some value', 'Another value', 'Third value', 'Something completely different'],
results = ['Some value', 'Another value'],
selectHtml;

$.each( options, function( index, value ) {
    var option = value;

    $.each( results, function( index, value ) {
        if ( option === value ) {
            selectHtml += '<option selected="selected" value="' + option + '">' + option + '</option>';
        }
        else {
            selectHtml += '<option value="' + option + '">' + option + '</option>';
        }
    });
});

你可以在这里找到一个活生生的例子：http://jsfiddle.net/wCWyp/

我想要完成的是同样的事情，但没有元素的乘法。

【问题讨论】：

标签： javascript jquery arrays loops

【解决方案1】：

进行数组搜索。

var 
options = ['Some value', 'Another value', 'Third value', 'Something completely different'],
results = ['Some value', 'Another value'],
selectHtml;

$.each( options, function( index, value ) {
    var option = value;
    if (results.indexOf(option) == -1){
        selectHtml += '<option value="' + option + '">' + option + '</option>';
    } else {
        selectHtml += '<option selected="selected" value="' + option + '">' + option + '</option>';
    }
});

$('#test').html( selectHtml );

【讨论】：

【解决方案2】：

如何生成select，然后做

 $("#selectId").val(results);

http://jsfiddle.net/mplungjan/kgJeQ/

var options = ['Some value', 
'Another value', 'Third value', 
'Something completely different'],
results = ['Some value', 'Another value'];

$("#selId").empty();
$.each( options, function( index, value ) {
    var text = value;
     $("#selId").append('<option value="' + value + '">' + text + '</option>');
});
$("#selId").val(results);

【讨论】：

是的，但还有其他情况迫使我实施循环解决方案。
嗯，然后我在这里严重浪费了我的时间。

【解决方案3】：

问题是您正在为options 数组的每个元素迭代results 数组。您可以只使用indexOf 方法来确定当前option 是否在results 数组中：

$.each( options, function( index, value ) {
    selectHtml += '<option ' + (results.indexOf(value) > -1 ? 'selected' : '') + ' value="' + value + '">' + value + '</option>';
});

这是updated fiddle。

但是，请记住 Array.prototype.indexOf 在旧版浏览器中不可用，因此您可能需要包含一个 polyfill。 MDN 在上面的链接中提供了一个。

【讨论】：