Thêm tùy chọn để chọn bằng javascript

Tôi muốn javascript này tạo các tùy chọn từ 12 đến 100 trong một lựa chọn với id = "mainSelect", vì tôi không muốn tạo tất cả các thẻ tùy chọn theo cách thủ công. Bạn có thể cho tôi một số gợi ý? Cảm ơn

function selectOptionCreate() {

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

  return line;
}

Bạn có thể đạt được điều này với một forvòng lặp đơn giản :

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);
}

Bản demo của Fiddle .

JS Perf so sánh câu trả lời của cả tôi và Sime Vidas , vì tôi nghĩ rằng anh ta trông có vẻ dễ hiểu / trực quan hơn tôi một chút và tôi tự hỏi làm thế nào điều đó sẽ chuyển thành việc thực hiện. Theo Chromium 14 / Ubuntu 11.04 của tôi có phần nhanh hơn, các trình duyệt / nền tảng khác có thể có kết quả khác nhau mặc dù.

Đã chỉnh sửa để phản hồi nhận xét từ OP:

[Làm thế nào] [tôi] áp dụng điều này cho nhiều hơn một yếu tố?

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);

Bản demo của Fiddle .

Và cuối cùng (sau một thời gian trì hoãn ...), một cách tiếp cận mở rộng nguyên mẫu của HTMLSelectElementchuỗi để xâu chuỗi populate()hàm, như một phương thức, đến nút 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
});

Bản demo của Fiddle .

Người giới thiệu:

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

Ở đây bạn đi:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

Bản demo trực tiếp: http://jsfiddle.net/mwPb5/

Cập nhật: Vì bạn muốn sử dụng lại mã này, đây là chức năng cho nó:

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 );
    }
}

Sử dụng:

initDropdownList( 'mainSelect', 12, 100 );

Bản demo trực tiếp: http://jsfiddle.net/mwPb5/1/

Cách ngắn gọn và trực quan nhất sẽ là:

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>

Bạn cũng có thể phân biệt tên và giá trị hoặc thêm các mục ở đầu danh sách với các tham số bổ sung cho các hàm được sử dụng:
HTMLSelect Element .add (item [, before]);
Tùy chọn mới (văn bản, giá trị, mặc định Đã chọn, đã chọn);

Tôi không khuyên bạn nên thực hiện các thao tác DOM trong một vòng lặp - có thể tốn kém trong các bộ dữ liệu lớn. Thay vào đó, tôi sẽ làm một cái gì đó như thế này:

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);
}

Bạn có thể đọc thêm về DocumentFragment trên MDN , nhưng đây là ý chính của nó:

Nó được sử dụng như một phiên bản Tài liệu nhẹ để lưu trữ một đoạn cấu trúc tài liệu bao gồm các nút giống như một tài liệu tiêu chuẩn. Sự khác biệt chính là bởi vì đoạn tài liệu không phải là một phần của cấu trúc DOM thực tế, những thay đổi được thực hiện đối với đoạn đó không ảnh hưởng đến tài liệu, gây ra hiện tượng phản xạ hoặc chịu bất kỳ tác động hiệu suất nào có thể xảy ra khi thay đổi được thực hiện.

Một điều tôi nên tránh là thực hiện các thao tác DOM trong một vòng lặp để tránh kết xuất lại nhiều lần của trang.

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');

Chỉnh sửa: đã xóa hàm để hiển thị cách bạn có thể chỉ định html mà bạn đã tạo cho một phần tử chọn khác - do đó tránh vòng lặp không cần thiết bằng cách lặp lại lệnh gọi hàm.

Xem: Cách tốt nhất để thêm các tùy chọn vào một lựa chọn từ một mảng với jQuery là gì?

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 

Khi bạn tạo một Optionđối tượng mới , có hai tham số cần truyền: Đầu tiên là văn bản bạn muốn xuất hiện trong danh sách và giá trị thứ hai được gán cho tùy chọn.

var myNewOption = new Option("TheText", "TheValue");

Sau đó, bạn chỉ cần gán Optionđối tượng này cho một phần tử mảng trống, ví dụ:

document.theForm.theSelectObject.options[0] = myNewOption;

Không có giải pháp nào ở trên làm việc cho tôi. Phương thức chắp thêm không gây ra lỗi khi tôi thử nhưng nó không giải quyết được vấn đề của tôi. Cuối cùng, tôi đã giải quyết vấn đề của mình với thuộc tính dữ liệu của select2. Tôi đã sử dụng json và nhận được mảng và sau đó đưa nó vào phần tử select2 khởi tạo. Để biết thêm chi tiết bạn có thể xem câu trả lời của tôi ở bên dưới bài viết.

https://stackoverflow.com/a/41297283/4928277

Thường thì bạn có một loạt các hồ sơ liên quan, tôi thấy thật dễ dàng và công khai để điền selecttheo cách này:

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

Điều này sẽ thay thế các tùy chọn hiện có.
Bạn có thể sử dụng selectEl.insertAdjacentHTML('afterbegin', str);để thêm chúng vào đầu thay thế.
VàselectEl.insertAdjacentHTML('beforeend', str); để thêm chúng vào cuối danh sách.

Cú pháp tương thích IE11:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');