从数组生成选择选项并通过与另一个数组(jQuery)进行比较来选择多个元素

时间:2012-07-09 07:56:11

标签: javascript jquery arrays loops

我想要做的是为JavaScript数组中的多个option下拉列表生成select个元素。然后在下拉列表中选择与另一个数组中的值相同的每个选项(示例中的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/

我想要完成的是同样的事情,但没有元素的倍增。

3 个答案:

答案 0 :(得分:2)

进行数组搜索。

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

答案 1 :(得分:2)

如何生成选择,然后执行

 $("#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);

答案 2 :(得分:1)

问题是你正在为results数组的每个元素迭代options数组。您可以使用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在上面的链接中提供了一个。