添加选项以通过javascript进行选择 [英] Adding options to select with javascript

问题描述

我希望这个javascript在选择id =mainSelect时创建12到100的选项，因为我不想手动创建所有选项标签。你能给我一些指点吗？谢谢

  function selectOptionCreate（）{
 
 var age = 88; 
 line =; 
 for（var i = 0; i <90; i ++）{
 line + =< option>; 
 line + = age + i; 
 line + =< / option>; 
} 
 
 return line; 
} 
  

解决方案

简单 for 循环：

  var min = 12，
 max = 100，
 select = document.getElementById（'selectElementId'）; 
 
 for（var i = min; i <= max; i ++）{
 var opt = document.createElement（'option'）; 
 opt.value = i; 
 opt.innerHTML = i; 
 select.appendChild（opt）; 
} 
  

JS Fiddle演示。

JS Perf 比较我的和 Sime Vidas的答案，因为我认为他看起来比我更容易理解/直观，我想知道这将如何转化为实施。根据Chromium 14 / Ubuntu 11.04，我的速度稍快，但其他浏览器/平台可能会有不同的结果。

---

编辑回应OP的意见：

[How] do [I]一个元素？

 函数populateSelect（target，min，max）{
 if （！target）{
 return false; 
} 
 else {
 var min = min || 0，
 max = max ||分钟+100; 
 
 select = document.getElementById（target）; 
 
 for（var i = min; i <= max; i ++）{
 var opt = document.createElement（'option'）; 
 opt.value = i; 
 opt.innerHTML = i; 
 select.appendChild（opt）; 
 
 
 
 //用以下三个值调用函数：
 populateSelect（'selectElementId'，12,100）; 
 
 //只调用'id'（'min'和'max'被设置为默认值）：
 populateSelect（'anotherSelect'）; 
 
 //使用'id'和'min'（'max'被设置为默认值）调用函数：
 populateSelect（'moreSelects'，50）; 
  

JS Fiddle演示。

最后（经过相当长的一段时间......），扩展了 HTMLSelectElement ，以便将作为方法的 populate（）函数链接到DOM节点：

  HTMLSelectElement.prototype.populate = function（opts）{
 var settings = {}; 
 
 settings.min = 0; 
 settings.max = settings.min + 100; （opts）中的（var userOpt）{
 if（opts.hasOwnProperty（userOpt））{
 settings [userOpt] = opts [userOpt]; 
 
; 
 
 
 
（var i = settings.min; i <= settings.max; i ++）{
 this.appendChild（new Option（i ， 一世））; 
} 
}; 
 
 document.getElementById（'selectElementId'）。populate（{
'min'：12，
'max'：40 
}）; 
  

JS Fiddle演示。

参考文献：

• node.appendChild（） 。


• document.getElementById（） 。


• 
  

I want this javascript to create options from 12 to 100 in a select with id="mainSelect", because I do not want to create all of the option tags manually. Can you give me some pointers? Thanks

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

解决方案

You could achieve this with a simple for loop:

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

JS Fiddle demo.

JS Perf comparison of both mine and Sime Vidas' answer, run because I thought his looked a little more understandable/intuitive than mine and I wondered how that would translate into implementation. According to Chromium 14/Ubuntu 11.04 mine is somewhat faster, other browsers/platforms are likely to have differing results though.

---

Edited in response to comment from OP:

[How] do [I] apply this to more than one element?

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

JS Fiddle demo.

And, finally (after quite a delay...), an approach extending the prototype of the HTMLSelectElement in order to chain the populate() function, as a method, to the DOM node:

HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

JS Fiddle demo.

References:

• node.appendChild().
• document.getElementById().
• element.innerHTML.

这篇关于添加选项以通过javascript进行选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！