如何使用Javascript填充选择框

我有一个简单的选择框，我想填充数据，但我不知道该怎么做。如何使用Javascript填充选择框

这是我的形式：

<form name="form">  
<select name="req_one" style="width:250px;"/> </select>  
</form>

这就是我想在我的JS：

var name = 'test'; 
var i = 1; 
document.form.req_one =new Option(name, i);

那么这将导致在等效：

<option value="1"> Test </option>

我是什么做错了？

来源

2013-02-26 Sir

当你执行该代码？您需要等到DOM中的选择可用，例如，将其封装在'window.onload = function（）{...}' – mplungjan 2013-02-26 06:20:40

中，它会使用window onload yes执行。 :) – Sir 2013-02-26 06:21:25

你需要等待，直到选择在DOM

可在这里有一个例子DEMO

<html> 
<head> 
<script> 
window.onload=function() { 
    var name = 'test'; 
    var i = 1; 
    var sel = document.myform.req_one; // or document.getElementsByName["req_one"[0]; 
    if (sel) { 
    sel.options[sel.options.length] =new Option(name, i); 
    } 
    else { 
    alert("Where did the sel go?"); 
    } 
} 
</script> 
</head> 
<body> 
<form name="myform">  
    <select name="req_one" style="width:250px;"/> </select>  
</form> 
</body> 
</html>

来源

2013-02-26 06:21:56 mplungjan

我已经有窗口onload - 但会尝试建议的代码！ – Sir 2013-02-26 06:22:54

所以你只需要你的代码中的.options [012] – mplungjan 2013-02-26 06:25:04

我似乎得到了未定义的req_one = /不知道为什么。有没有办法检查它的第一个加载if语句？ – Sir 2013-02-26 06:32:57

你犯了一个小小的错误。我巩固了你的整个代码：

<html> 
<head> 
<script type="text/javascript"> 
function l1(){ 
    var name = 'test'; 
    var i = 1; 
    document.form.req_one.options[0] =new Option(name, i);//you forgot to include .options[0] 
} 
</script> 
</head> 
<body onload="l1()"> 
<form name="form">  
<select name="req_one" style="width:250px;"/> </select>  
</form> 
</body> 
</html>

来源

2013-02-26 06:24:29 Aashray

糟糕的想法，使用身体onload内联... – mplungjan 2013-02-26 06:25:47

雅我知道...只是用于一个例子 – Aashray 2013-02-26 06:27:49

我会建议一个简单的方法与jQuery。

var name = 'test'; 
var i = 1; 
$("select[name='req_one']").append('<option value="'+i+'">'+value+'</option>');

我希望你知道如何使用jQuery。

来源

2013-02-26 06:26:33

是什么让我比平原JS的建议更容易？除非jQuery被用于其他的事情，这是一个框架的浪费，不保存任何打字 – mplungjan 2013-02-26 06:27:02

与此，你不必在负载上调用身体的功能。一个非常有限的使用方法。它可以用'$（document）.ready'函数来实现。我也没说你的答案是错的。如此寒意 – 2013-02-26 06:28:58

当然你需要执行onload！你需要将你的代码包装在'$（function（）{...}）;' – mplungjan 2013-02-26 06:29:56

你忘了到新创建的Option添加到选项选择元素的列表：

document.form.req_one.options[0] = new Option(name, i);

的jsfiddle例如：http://jsfiddle.net/zxT8U/2/

来源

2013-02-26 06:34:02

这将添加第二个选项 – mplungjan 2013-02-26 06:35:12

这就是他的代码所指定的。要将其更改为第一个选项，只需将'var i = 1;'替换为'var i = 0;' - 基于零的索引以及所有这些。 – 2013-02-26 06:38:48

他的代码是指定他的第一个选项应该是''当然当我们看到''我'，我们看到一个索引:) – mplungjan 2013-02-26 06:42:02

如何使用Javascript填充选择框

回答

相关问题