使用 javascript 向 select 添加選項

Question

我希望這個 javascript 在 id="mainSelect" 的 select 中創建從 12 到 100 的選項，因為我不想手動創建所有選項標簽。 你能給我一些指示嗎？ 謝謝

function selectOptionCreate() {

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

  return line;
}

Answer 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 小提琴演示。

我的和Sime Vidas 的答案的JS Perf比較，運行是因為我認為他看起來比我的更易於理解/直觀，我想知道這將如何轉化為實施。 根據 Chromium 14/Ubuntu 11.04，我的速度要快一些，但其他瀏覽器/平台可能會產生不同的結果。

---

針對 OP 的評論進行了編輯：

[如何] [我] 將其應用於多個元素？

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 小提琴演示。

最后（經過相當長的延遲......），一種擴展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 小提琴演示。

參考：

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

Answer 2

最簡潔直觀的方法是：

 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]);
新選項（文本、值、默認選擇、選擇）；

Answer 3

干得好：

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/

Answer 4

我不建議在循環中進行 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);
}

您可以在MDN上閱讀有關 DocumentFragment 的更多信息，但這里是它的要點：

它用作 Document 的輕量級版本，用於存儲由節點組成的文檔結構的片段，就像標准文檔一樣。 關鍵區別在於，由於文檔片段不是實際 DOM 結構的一部分，因此對片段所做的更改不會影響文檔、導致重排或在進行更改時產生任何性能影響。

Answer 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 分配給另一個 select 元素 - 從而通過重復函數調用避免不必要的循環。

Answer 6

請參閱： 使用 jQuery 從數組中添加選項的最佳方法是什么？

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

Answer 7

當您創建一個新的Option對象時，需要傳遞兩個參數：第一個是您希望出現在列表中的文本，第二個是要分配給選項的值。

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

然后，您只需將此Option對象分配給一個空數組元素，例如：

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

Answer 8

以上解決方案都不適合我。 當我嘗試時附加方法沒有給出錯誤，但它沒有解決我的問題。 最后我用select2的數據屬性解決了我的問題。 我使用 json 並獲取了數組，然后在 select2 元素初始化中將其提供。 有關更多詳細信息，您可以在下面的帖子中查看我的答案。

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

Answer 9

通常您有一系列相關記錄，我發現以這種方式填充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('');

Answer 10

 for (let i = 12; i< 101; i++){ let html = "" html += ` <option value="${i}">${i}</option> ` mainSelect.innerHTML += html }

 const mainSelect = document.getElementById("mainSelect")

這是解決您問題的一種非常容易理解的方法！ 希望它幫助:)

Answer 11

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age, age));
}


Your age: <select id="ageselect"><option value="">Please select</option></select>

請注意，該值已作為第二個參數添加到 new Option