給定的 JavaScript 程式碼旨在建立一個選項範圍從 12 到 100 的 select 元素。雖然程式碼使用 for 循環,但它是不是產生大量選項的最有效方法。
改進程式碼:
要實現所需的功能,請考慮以下最佳化程式碼:
<code class="javascript">var min = 12; var max = 100; var select = document.getElementById("mainSelect"); for (var i = min; i <= max; i++) { var opt = document.createElement("option"); opt.value = i; opt.innerHTML = i; select.appendChild(opt); }</code>
此程式碼使用循環動態產生選項並將其附加到select 元素。它消除了手動創建選項的需要,從而提高了效率。
其他增強功能:
1.通用函數:
為了進一步簡化流程,您可以建立一個可重複使用的函數來填入選擇元素:
<code class="javascript">function populateSelect(id, min, max) { var select = document.getElementById(id); for (var i = min; i <= max; i++) { var opt = document.createElement("option"); opt.value = i; opt.innerHTML = i; select.appendChild(opt); } }</code>
2。原型擴充:
或者,您可以擴充HTMLSelectElement 原型以新增填充方法:
<code class="javascript">HTMLSelectElement.prototype.populate = function(opts) { var settings = { min: 0, 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)); } };</code>
使用此方法,您可以填入選擇元素,例如:
<code class="javascript">document.getElementById("mainSelect").populate({ min: 12, max: 40 });</code>
這些方法在動態填入選擇選項方面提供了靈活性和可重複使用性。
以上是如何在 JavaScript 中動態填入選擇選項?的詳細內容。更多資訊請關注PHP中文網其他相關文章!