如何在<select>选项列表中使用JavaScript?</select>

时间:2011-07-25 12:38:58

标签: html html5

我如何使用

          <select>
          <option>numbers1-100</option>
          </select>

我必须在我的选项列表中使用1到100个数字。打字所有选项需要时间并使代码更大。我猜我们必须使用javascript使其工作使用for循环和文档write.But我不知道如何以正确的方式放置代码。如何使用java脚本列出选项列表?我的意思是java脚本应该在我的标签旁边;例子

        number : 1-1oo \\ here the options list should be printed

和数字可以在任何地方,但脚本应该在数字旁边打印选项列表。我如何制作它?无法弄明白。从一个小时左右开始尝试。

4 个答案:

答案 0 :(得分:4)

将此功能放在<script>标签中或将其包含在脚本中。只要您需要创建选择框,就可以调用函数createSelectOption()

以下是如何使用javascript加载页面加载:`

function createSelectOption() {    
    var select_option = '<select>';
    for(i = 1; i <= 100; i++) { 
       select_option += '<option value=' + i + '>' + i + '</option>';
    }
    select_option += '</select>';
    document.getElementById('div').innerHTML = select_option;
}

我添加了一个jsfiddle demo来向您展示它应该正常工作/

答案 1 :(得分:2)

你不应该真的使用javascript,它通常会更好地使用服务器端语言,如PHP。您可以使用for loopwhile loop轻松完成此操作

答案 2 :(得分:1)

这是实现此目的的一种方法。

http://jsfiddle.net/ryh7k/1/

var selectEle = document.getElementById('mySelect'),
    optionEle = undefined;

for (var i=1;i<=100;i++) {
    optionEle = document.createElement('option');
    optionEle.setAttribute('value', i.toString());
    optionEle.innerText = i.toString();
    selectEle.appendChild(optionEle);
}

答案 3 :(得分:0)

最简单的情况:

<select>
<script>
for (var i = 1; i < 101; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>

但这当然有问题。首先,没有JS的人不会看到任何选项,并且SELECT中的SCRIPT标签也不是那么好。

<select id="container"></select>
<script>
var s = document.getElementById('container');
var opts = '';
for (var i = 1; i < 101; i++) {
    opts += '<option value="'+i+'">'+i+'</option>';
}
s.innerHTML = opts;
</script>