Menambahkan opsi untuk dipilih dengan javascript

Saya ingin javascript ini membuat opsi dari 12 hingga 100 dalam pilih dengan id = "mainSelect", karena saya tidak ingin membuat semua tag opsi secara manual. Bisakah Anda memberi saya beberapa petunjuk? Terima kasih

function selectOptionCreate() {

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

  return line;
}

Anda bisa mencapainya dengan forloop sederhana :

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

Demo JS Fiddle .

Perbandingan JS Perf dari jawaban saya dan Sime Vidas , berjalan karena saya pikir dia tampak sedikit lebih dimengerti / intuitif daripada milik saya dan saya bertanya-tanya bagaimana itu akan diterjemahkan ke dalam implementasi. Menurut saya, Chromium 14 / Ubuntu 11.04 lebih cepat, browser / platform lain cenderung memiliki hasil yang berbeda.

Diedit dalam menanggapi komentar dari OP:

[Bagaimana] [saya] menerapkan ini pada lebih dari satu elemen?

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

Demo JS Fiddle .

Dan, akhirnya (setelah cukup lama ...), sebuah pendekatan yang memperluas prototipe HTMLSelectElementuntuk rantai populate()fungsi, sebagai metode, ke simpul 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
});

Demo JS Fiddle .

Referensi:

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

Ini dia:

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

Demo langsung: http://jsfiddle.net/mwPb5/

Pembaruan: Karena Anda ingin menggunakan kembali kode ini, inilah fungsinya:

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

Pemakaian:

initDropdownList( 'mainSelect', 12, 100 );

Demo langsung: http://jsfiddle.net/mwPb5/1/

Cara yang paling ringkas dan intuitif adalah:

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>

Anda juga dapat membedakan nama dan nilai atau menambahkan item di awal daftar dengan parameter tambahan untuk fungsi yang digunakan:
HTMLSelect Element .add (item [, sebelum]);
Opsi baru (teks, nilai, default Dipilih, dipilih);

Saya tidak merekomendasikan melakukan manipulasi DOM dalam satu loop - yang bisa mahal dalam dataset besar. Sebaliknya, saya akan melakukan sesuatu seperti ini:

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

Anda dapat membaca lebih lanjut tentang DocumentFragment di MDN , tetapi inilah intinya:

Ini digunakan sebagai versi ringan Dokumen untuk menyimpan segmen struktur dokumen yang terdiri dari node seperti dokumen standar. Perbedaan utama adalah bahwa karena fragmen dokumen bukan bagian dari struktur DOM yang sebenarnya, perubahan yang dilakukan pada fragmen tidak mempengaruhi dokumen, menyebabkan reflow, atau menimbulkan dampak kinerja yang dapat terjadi ketika perubahan dilakukan.

Satu hal yang saya hindari adalah melakukan operasi DOM dalam satu lingkaran untuk menghindari pengulangan ulang halaman.

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

Sunting: menghapus fungsi untuk menunjukkan bagaimana Anda bisa menetapkan html yang telah Anda buat ke elemen pilih lainnya - sehingga menghindari perulangan yang tidak perlu dengan mengulangi panggilan fungsi.

Lihat: Apa cara terbaik untuk menambahkan opsi ke pilih dari array dengan jQuery?

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

Saat Anda membuat Optionobjek baru , ada dua parameter yang harus dilewati: Yang pertama adalah teks yang ingin Anda tampilkan dalam daftar, dan yang kedua nilai yang akan diberikan ke opsi.

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

Anda kemudian cukup menetapkan Optionobjek ini ke elemen array kosong, misalnya:

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

Tidak ada solusi di atas yang berfungsi untuk saya. Tambahkan metode tidak memberikan kesalahan ketika saya mencoba tetapi tidak menyelesaikan masalah saya. Pada akhirnya saya memecahkan masalah saya dengan properti data select2. Saya menggunakan json dan mendapatkan array dan kemudian memberikannya di select2 elemen initialize. Untuk lebih jelasnya Anda bisa melihat jawaban saya di posting di bawah ini.

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

Seringkali Anda memiliki serangkaian catatan terkait, saya merasa mudah dan cukup deklaratif untuk mengisi selectcara ini:

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

Ini akan menggantikan opsi yang ada.
Anda dapat menggunakannya selectEl.insertAdjacentHTML('afterbegin', str);untuk menambahkannya ke atas.
Dan selectEl.insertAdjacentHTML('beforeend', str);menambahkannya ke bagian bawah daftar.

Sintaks yang kompatibel dengan IE11:

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