Javascript ile seçmek için seçenekler ekleme

Ben tüm seçenek etiketleri el ile oluşturmak istemiyorum çünkü bu javascript id = "mainSelect" ile bir seçimde 12 ila 100 seçenekleri oluşturmak istiyorum. Bana bazı işaretçiler verebilir misin? Teşekkürler

function selectOptionCreate() {

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

  return line;
}

Bunu basit bir fordöngü ile başarabilirsiniz :

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 Fiddle demosu .

JS Perf hem benim hem de Sime Vidas'ın cevabını karşılaştırdı , çünkü onun benimkinden biraz daha anlaşılır / sezgisel göründüğünü düşündüm ve bunun nasıl uygulamaya dönüşeceğini merak ettim. Chromium 14 / Ubuntu 11.04 madenine göre biraz daha hızlı, diğer tarayıcıların / platformların farklı sonuçlar alması muhtemel.

OP'nin yorumuna yanıt olarak düzenlendi :

[Ben] bunu birden fazla elemana nasıl uygularım?

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

JS Fiddle demosu .

Ve son olarak (oldukça gecikmeden sonra), işlevi bir yöntem olarak DOM düğümüne HTMLSelectElementzincirlemek için ' nin prototipini genişleten bir yaklaşım populate():

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

JS Fiddle demosu .

Referanslar:

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

Hadi bakalım:

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

Canlı demo: http://jsfiddle.net/mwPb5/

Güncelleme: Bu kodu yeniden kullanmak istediğiniz için, bunun işlevi şöyledir:

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

Kullanımı:

initDropdownList( 'mainSelect', 12, 100 );

Canlı demo: http://jsfiddle.net/mwPb5/1/

En özlü ve sezgisel yol:

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>

Ayrıca, adı ve değeri farklılaştırabilir veya listenin başında kullanılan işlevlere ek parametrelerle öğeler ekleyebilirsiniz:
HTMLSelect Element .add (item [, önce]);
yeni Seçenek (metin, değer, varsayılanSeçilmiş, seçili);

Bir döngü içinde DOM manipülasyonları yapmanızı önermiyorum - bu, büyük veri kümelerinde pahalı olabilir. Bunun yerine, böyle bir şey yapardım:

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'de DocumentFragment hakkında daha fazla bilgi edinebilirsiniz , ancak işte özü:

Tıpkı standart bir belge gibi, düğümlerden oluşan belge yapısının bir bölümünü saklamak için Belgenin hafif bir sürümü olarak kullanılır. Önemli fark, belge parçası gerçek DOM yapısının bir parçası olmadığından, parçada yapılan değişikliklerin belgeyi etkilememesi, yeniden akmasına neden olmaması veya değişiklik yapıldığında oluşabilecek performans etkisine maruz kalmamasıdır.

Önleyeceğim tek şey, sayfanın tekrar tekrar görüntülenmesini önlemek için bir döngüde DOM işlemleri yapmaktır.

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

Düzenleme: Sadece başka bir seçme elemanına oluşturduğunuz html'yi nasıl atayabileceğinizi göstermek için işlevi kaldırdı - böylece işlev çağrısını tekrarlayarak gereksiz döngüden kaçının.

Bkz: jQuery içeren bir diziden seçime seçenek eklemenin en iyi yolu nedir?

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

Yeni bir Optionnesne oluşturduğunuzda , iletilecek iki parametre vardır: Birincisi, listede görünmesini istediğiniz metindir ve ikincisi seçeneğe atanacak değerdir.

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

Daha sonra bu Optionnesneyi boş bir dizi öğesine atamanız yeterlidir , örneğin:

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

Yukarıdaki çözümlerin hiçbiri benim için işe yaramadı. Ekleme yöntemi denediğimde hata vermedi ama sorunumu çözmedi. Sonunda ben select2 data özelliği ile benim sorun çözüldü. Ben json kullandım ve dizi var ve sonra select2 öğe başlatmak vermek. Daha fazla ayrıntı için cevabımı aşağıdaki yazıda görebilirsiniz.

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

Genellikle ilgili kayıtlar diziniz var, selectbu şekilde doldurmayı kolay ve oldukça beyan edici buluyorum :

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

Bu mevcut seçeneklerin yerini alacaktır.
Bunları selectEl.insertAdjacentHTML('afterbegin', str);en üste eklemek için kullanabilirsiniz.
Ve selectEl.insertAdjacentHTML('beforeend', str);bunları listenin en altına eklemek için.

IE11 uyumlu sözdizimi:

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