Question

可能重复：
JavaScript - populate drop down list with array

我有select框，

<select name="supplier" id="supplier"><option></option></select>

我想使用select设置此Javascript框的值。 Javascript变量可以是String或Array。这意味着如果它是String，则select框中只有一个选项。如果它是一个数组，select框应该包含多个options。有人请帮我找到解决方案。提前谢谢....

我试过了

document.getElementById('supplier').value="Option 1";

但它不起作用

Answer 1

如果您正在进行大量的DOM操作，我建议使用jQuery：

$("#supplier").append('<option value=1>My option</option>');

没有jQuery：

var select = document.getElementById("supplier");
select.options[select.options.length] = new Option('Text 1', 'Value1');

Answer 2

试试这个：

http://jsfiddle.net/f4yEt/

function addOptions(input) {
    var sel = document.getElementById("supplier");
    if (typeof input === "string") {
        input = [input];
    }
    sel.options.length = 0;
    for (var i = 0; i < input.length; i++) {
        sel.options[sel.options.length] = new Option(input[i], input[i]);
        // This APPENDS options
    }
}

input参数可以是字符串或数组（从技术上讲，它只检查字符串，将其转换为数组进行迭代），然后为数组中的每个项动态附加一个选项。

Answer 3

为此，您需要在。

中创建节点

var select = document.getElementById('supplier');
var option = document.createElement('option');
select.add(option);

这是一个考虑IE / FF差异的更大教程： http://www.mredkj.com/tutorials/tutorial005.html

<强> BUT

我会考虑使用jquery。 Sujathan的回答是jquery。

Answer 4

数组的jQuery方法

var array = ["item 1", "item 2", "item 3"];
$.each(array, function(i, value) {
  $('#supplier').append($(document.createElement('option')).attr('value', i + 1).text(value));
});

http://jsfiddle.net/NN8KS/

Answer 5

//var varOpt = "test";
var varOpt = new Array('test1', 'test2', 'test3');
var sel = document.getElementById('supplier');

if( typeof varOpt === 'string' ){
   sel.add(new Option(varOpt , varOpt));
} else {
    for(key in varOpt) {
        sel.add(new Option(varOpt[key], varOpt[key]));
    }
}

使用javascript设置选择框值

5 个答案: