添加要使用javascript进行选择的选项

Question

添加要使用javascript进行选择的选项

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

function selectOptionCreate() {

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

  return line;}

Answer 1

你可以用一个简单的for循环：var&nbsp;min&nbsp;=&nbsp;12, &nbsp;&nbsp;&nbsp;&nbsp;max&nbsp;=&nbsp;100, &nbsp;&nbsp;&nbsp;&nbsp;select&nbsp;=&nbsp;document.getElementById('selectElementId');for&nbsp;(var&nbsp;i&nbsp;=&nbsp;min;&nbsp;i<=max;&nbsp;i++){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;opt&nbsp;=&nbsp;document.createElement('option'); &nbsp;&nbsp;&nbsp;&nbsp;opt.value&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;opt.innerHTML&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;select.appendChild(opt);}JS Fiddle演示.JS Perf我的和我的比较Sime Vidas的回答，因为我认为他的看起来比我的更容易理解/直观，我想知道这将如何转化为实现。根据Chromium14/Ubuntu11.04的说法，我的速度有点快，其他浏览器/平台可能会有不同的结果。编辑针对执行部分的评论：[我]如何将其应用于多个元素？function&nbsp;populateSelect(target,&nbsp;min,&nbsp;max){ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!target){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;min&nbsp;=&nbsp;min&nbsp;||&nbsp;0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max&nbsp;=&nbsp;max&nbsp;||&nbsp;min&nbsp;+&nbsp;100; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;select&nbsp;=&nbsp;document.getElementById(target); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;min;&nbsp;i<=max;&nbsp;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;opt&nbsp;=&nbsp;document.createElement('option'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opt.value&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opt.innerHTML&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;select.appendChild(opt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}//&nbsp;calling&nbsp;the&nbsp;function&nbsp;with&nbsp;all&nbsp;three&nbsp;values:populateSelect('selectElementId',12,100); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;calling&nbsp;the&nbsp;function&nbsp;with&nbsp;only&nbsp;the&nbsp;'id'&nbsp;('min'&nbsp;and&nbsp;'max'&nbsp;are&nbsp;set&nbsp;to&nbsp;defaults):populateSelect('anotherSelect'); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;calling&nbsp;the&nbsp;function&nbsp;with&nbsp;the&nbsp;'id'&nbsp;and&nbsp;the&nbsp;'min'&nbsp;(the&nbsp;'max'&nbsp;is&nbsp;set&nbsp;to&nbsp;default):populateSelect('moreSelects',&nbsp;50);JS Fiddle演示.最后(经过很长时间的延迟.)，一种扩展HTMLSelectElement以便将populate()函数作为方法传递到DOM节点：HTMLSelectElement.prototype.populate&nbsp;=&nbsp;function&nbsp;(opts)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;settings&nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;settings.min&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;settings.max&nbsp;=&nbsp;settings.min&nbsp;+&nbsp;100; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;userOpt&nbsp;in&nbsp;opts)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(opts.hasOwnProperty(userOpt))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;settings[userOpt]&nbsp;=&nbsp;opts[userOpt]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;settings.min;&nbsp;i&nbsp;<=&nbsp;settings.max;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.appendChild(new&nbsp;Option(i,&nbsp;i)); &nbsp;&nbsp;&nbsp;&nbsp;}};document.getElementById('selectElementId').populate({ &nbsp;&nbsp;&nbsp;&nbsp;'min':&nbsp;12, &nbsp;&nbsp;&nbsp;&nbsp;'max':&nbsp;40});JS Fiddle演示.参考资料：node.appendChild().document.getElementById().element.innerHTML.

Answer 2

我不建议在循环中执行DOM操作-这在大型数据集中会变得非常昂贵。相反，我会这样做：var&nbsp;elMainSelect&nbsp;=&nbsp;document.getElementById('mainSelect');function&nbsp;selectOptionsCreate()&nbsp;{ &nbsp;&nbsp;var&nbsp;frag&nbsp;=&nbsp;document.createDocumentFragment(), &nbsp;&nbsp;&nbsp;&nbsp;elOption; &nbsp;&nbsp;for&nbsp;(var&nbsp;i=12;&nbsp;i<101;&nbsp;++i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;elOption&nbsp;=&nbsp;frag.appendChild(document.createElement('option')); &nbsp;&nbsp;&nbsp;&nbsp;elOption.text&nbsp;=&nbsp;i; &nbsp;&nbsp;} &nbsp;&nbsp;elMainSelect.appendChild(frag);}您可以在MDN，但它的要点是：它被用作文档的轻量级版本，用于存储由节点组成的文档部分，就像标准文档一样。关键的区别在于，由于文档片段不是实际DOM结构的一部分，因此对该片段所做的更改不会影响文档，不会导致重流，也不会导致更改时可能发生的任何性能影响。