Добавление вариантов для выбора с помощью JavaScript

161

Я хочу, чтобы этот javascript создавал параметры от 12 до 100 для выбора с id = "mainSelect", потому что я не хочу создавать все теги параметров вручную. Можете ли вы дать мне несколько советов? Спасибо

function selectOptionCreate() {

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

  return line;
}
Джек Потрошитель
источник
14
Голосование для повторного открытия, поскольку связанный «дубликат» имеет только ответы на основе jQuery, тогда как для этого требуется (или, по крайней мере, подразумевается требование) простого JavaScript.
Дэвид говорит восстановить Монику
3
Отличный ответ здесь :mySelect.options[mySelect.options.length] = new Option('Text 1', 'Value1');
ruffin

Ответы:

254

Вы можете достичь этого с помощью простого 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 Fiddle demo .

JS Perf сравнил мой ответ и ответ Симе Видаса , потому что я думал, что он выглядел немного более понятным / интуитивным, чем мой, и мне было интересно, как это отразится на реализации. По словам 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);

JS Fiddle demo .

И, наконец (после довольно большой задержки ...), подход, расширяющий прототип для 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
});

JS Fiddle demo .

Ссылки:

Дэвид говорит восстановить Монику
источник
@Jack: согласился, и я использовал этот подход в последнем редакторе :)
Дэвид говорит восстановить Monica
Кроме того, расширение прототипов хоста (хотя и заманчиво) считается плохой идеей .
RobG
Я думаю, что это следует обновить, чтобы использовать innerTextвместо того, innerHTMLчтобы избежать уязвимостей межсайтового скриптинга. Как вы думаете, @DavidThomas?
Абхи
20

Ну вот:

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/

Шиме Видас
источник
как применить это к более чем одному элементу?
Jacktheripper
9

Наиболее кратким и интуитивным способом будет:

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>

Вы также можете различать имя и значение или добавлять элементы в начале списка с дополнительными параметрами к используемым функциям:
HTMLSelect Element .add (item [, before]);
новая опция (текст, значение, defaultSelected, selected);

пользователь
источник
8

Я не рекомендую делать 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 на MDN , но вот суть этого:

Он используется в качестве упрощенной версии документа для хранения сегмента структуры документа, состоящего из узлов, как стандартный документ. Основное отличие состоит в том, что, поскольку фрагмент документа не является частью фактической структуры DOM, изменения, внесенные во фрагмент, не влияют на документ, не вызывают перекомпоновку и не влияют на производительность, которая может возникнуть при внесении изменений.

thdoan
источник
4

Единственное, чего я бы хотел избежать, это делать операции 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-код другому элементу выбора - таким образом, избегая ненужного зацикливания, повторяя вызов функции.

kinakuta
источник
как применить это к более чем одному элементу?
Jacktheripper
Не уверен, что я следую - вы хотите добавить одни и те же параметры к нескольким элементам выбора?
Кинакута
Да, я хочу коробки с
такими
Я превратил это в функцию, которую вы можете вызвать, где вы просто передаете идентификатор элемента select, к которому вы хотите добавить опции.
Кинакута
2
Для этого и создан documentFragment. Вы можете легко изменить принятый ответ, чтобы сначала параметры добавлялись в documentFragment, предотвращая многократные визуализации.
Сам Браславский
1

Когда вы создаете новый Optionобъект, нужно передать два параметра: первый - это текст, который вы хотите отобразить в списке, а второй - значение, которое будет назначено параметру.

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

Затем вы просто назначаете этот Optionобъект пустому элементу массива, например:

document.theForm.theSelectObject.options[0] = myNewOption;
мохан му
источник
0

Ни одно из вышеперечисленных решений не помогло мне. Метод добавления не выдал ошибку, когда я пытался, но это не решило мою проблему. В конце концов я решил свою проблему со свойством data select2. Я использовал json и получил массив, а затем передал его в элемент select2 initialize. Более подробно вы можете увидеть мой ответ в посте ниже.

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

Энгин Айдогду
источник
0

Часто у вас есть массив связанных записей, и я считаю, что заполнить 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('');
пользователь
источник