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

Ответ 1

Вы можете достичь этого с помощью простого цикла 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 сравнение моих и ответ 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);

JS Fiddle demo.

И, наконец (после довольно большой задержки...), подход, расширяющий прототип HTMLSelectElement, чтобы связать функцию populate() как метод с DOM node:

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.

Литература:

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

Ответ 2

Здесь вы идете:

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/

Ответ 3

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

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

Ответ 4

Смотрите: Каков наилучший способ добавления опций к выбору из массива с помощью jQuery?

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

Ответ 5

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

Ответ 6

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

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

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

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

Ответ 7

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

fooobar.com/questions/59217/...

Ответ 8

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

Ответ 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>