使用javascript添加要选择的选项
我希望这个javascript在id=mainSelect的select中创建从12到100的选项,因为我不希望手动创建所有选项标记。你能给我一些指点吗?谢谢使用javascript添加要选择的选项,javascript,html,Javascript,Html,我希望这个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 += "</opt
function selectOptionCreate() {
var age = 88;
line = "";
for (var i = 0; i < 90; i++) {
line += "<option>";
line += age + i;
line += "</option>";
}
return line;
}
见:
您可以通过一个简单的for循环来实现这一点: 参考资料: . . .
我要避免的一件事是在循环中执行DOM操作,以避免重复重新呈现页面
var firstSelect = document.getElementById('first select elements id'),
secondSelect = document.getElementById('second select elements id'),
optionsHTML = [],
i = 12;
for (; i < 100; i += 1) {
optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}
firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');
编辑:删除该函数以显示如何将构建的html分配给另一个select元素,从而通过重复函数调用避免不必要的循环。开始:
for ( i = 12; i <= 100; i += 1 ) {
option = document.createElement( 'option' );
option.value = option.text = i;
select.add( option );
}
现场演示:以上解决方案都不适合我。Append方法在我尝试时并没有给出错误,但它并没有解决我的问题。最后,我解决了select2的数据属性的问题。我使用json获得数组,然后在select2元素初始化中给出它。关于更多细节,你可以在下面的帖子中看到我的答案
我不建议在循环中进行DOM操作,因为在大型数据集中,这可能会很昂贵。相反,我会这样做:
var elMainSelect = document.getElementById('mainSelect');
function selectOptionsCreate() {
var frag = document.createDocumentFragment(),
elOption;
for (var i=12; i<101; ++i) {
elOption = frag.appendChild(document.createElement('option'));
elOption.text = i;
}
elMainSelect.appendChild(frag);
}
您可以在上阅读有关DocumentFragment的更多信息,但这里是其要点:
它用作文档的轻量级版本,用于存储
与标准文档一样,由节点组成的文档结构。
关键的区别在于,因为文档片段不是
对于实际DOM的结构,对片段所做的更改不会影响
该文档可能会导致回流,或产生任何性能影响
在进行更改时发生
通常情况下,您会有一系列相关记录,我发现用这种方式填充select很容易,而且相当具有声明性:
selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');
创建新选项对象时,有两个参数要传递:第一个是要传递的文本
显示在列表中,第二个选项显示要分配给该选项的值
var myNewOption = new Option("TheText", "TheValue");
然后,只需将此选项对象指定给空数组元素,例如:
document.theForm.theSelectObject.options[0] = myNewOption;
最简洁直观的方式是: var-selectElement=document.getElementById'ageselect';
风险值年龄=12;请参阅投票重新打开,因为链接的“duplicate”只有基于jQuery的答案,而这一个需要或至少意味着需要纯JavaScript:mySelect.options[mySelect.options.length]=新选项“Text 1”,“Value1”;如何将其应用于多个元素?如何将其应用于多个元素?我不确定是否遵循-是否要将相同的选项添加到多个选择元素?是,我想使用相同的选项创建框我将其分解成一个函数,您可以在其中调用,只需传入要附加选项的select元素的id。这就是documentFragment的用途。您可以很容易地修改接受的答案,以便在开始时将选项附加到documentFragment,从而防止多次渲染。@杰克:同意,我在后面的编辑中也使用了这种方法,在诱惑的同时扩展主机原型被认为是一个挑战。我认为应该更新它以使用innerText而不是innerHTML来避免跨站点脚本漏洞。你觉得大卫托马斯怎么样?
function initDropdownList( id, min, max ) {
var select, i, option;
select = document.getElementById( id );
for ( i = min; i <= max; i += 1 ) {
option = document.createElement( 'option' );
option.value = option.text = i;
select.add( option );
}
}
initDropdownList( 'mainSelect', 12, 100 );
var elMainSelect = document.getElementById('mainSelect');
function selectOptionsCreate() {
var frag = document.createDocumentFragment(),
elOption;
for (var i=12; i<101; ++i) {
elOption = frag.appendChild(document.createElement('option'));
elOption.text = i;
}
elMainSelect.appendChild(frag);
}
selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');
array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');
var myNewOption = new Option("TheText", "TheValue");
document.theForm.theSelectObject.options[0] = myNewOption;