我希望该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 Perf比较了我和Sime Vidas的答案,是因为我认为他看上去比我的理解/直观得多,我想知道这将如何转化为实现。根据Chromium 14 / Ubuntu 11.04的说法,其速度要快一些,但其他浏览器/平台的结果可能会有所不同。
根据OP的评论进行了编辑:
[如何]将[I]应用于多个元素?
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);
最后,(经过相当长的延迟之后),一种方法扩展了原型,HTMLSelectElement
以便将populate()
函数作为一种方法链接到DOM节点:
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
});
参考文献:
干得好:
for ( i = 12; i <= 100; i += 1 ) {
option = document.createElement( 'option' );
option.value = option.text = i;
select.add( option );
}
现场演示: http ://jsfiddle.net/mwPb5/
更新:由于您想重用此代码,因此它的功能如下:
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 );
现场演示: http ://jsfiddle.net/mwPb5/1/
最简洁直观的方法是:
var selectElement = document.getElementById('ageselect');
for (var age = 12; age <= 100; age++) {
selectElement.add(new Option(age));
}
Your age: <select id="ageselect"><option value="">Please select</option></select>
您也可以区分名称和值,或者在列表的开头添加项,并为使用的函数添加其他参数:
HTMLSelectElement.add(item [,before]);
新选项(文本,值,defaultSelected,选中);
我不建议在循环内进行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);
}
您可以在MDN上阅读有关DocumentFragment的更多信息,但这是要点:
它用作Document的轻量级版本,用于存储由标准节点组成的节点的文档结构的一部分。关键区别在于,由于文档片段不是实际DOM结构的一部分,因此对该片段所做的更改不会影响文档,不会导致重排,也不会对更改造成任何性能影响。
我要避免的一件事是循环执行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元素-从而通过重复函数调用避免不必要的循环。
请参阅:使用jQuery向数组中的选择添加选项的最佳方法是什么?
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
创建新Option
对象时,有两个参数要传递:第一个是要显示在列表中的文本,第二个是要分配给该选项的值。
var myNewOption = new Option("TheText", "TheValue");
然后,您只需将此Option
对象分配给一个空数组元素,例如:
document.theForm.theSelectObject.options[0] = myNewOption;
以上解决方案均不适用于我。尝试时,append方法没有给出错误,但没有解决我的问题。最后,我用select2的data属性解决了我的问题。我使用了json并得到了数组,然后在select2元素中将其初始化。有关更多详细信息,请参见下面的帖子。
https://stackoverflow.com/a/41297283/4928277
通常,您会拥有一系列相关记录,我发现用select
这种方式填写起来很容易且相当声明:
selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');
这将替换现有选项。
您可以selectEl.insertAdjacentHTML('afterbegin', str);
用来将它们添加到顶部。
并且selectEl.insertAdjacentHTML('beforeend', str);
将它们添加到列表的底部。
IE11兼容语法:
array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');
文章标签:html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!