JavaScript의 옵션을 사용하여 프로그래밍 방식으로 선택 요소를 채우는 방법은 무엇입니까?

JavaScript로 선택에 옵션 추가

제공된 기능을 확장하여 다양한 값으로 옵션을 만들고 추가하는 여러 가지 방법을 살펴보겠습니다. ID가 "mainSelect"인 선택 요소에 추가:

방법 1:

이 방법은 원하는 범위 내에서 옵션을 프로그래밍 방식으로 생성하는 향상된 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>

방법 2(리팩토링):

간단하고 가독성을 높이기 위해 이 프로세스를 처리하는 함수를 만들 수 있습니다.

<code class="javascript">function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0;
        var max = max || min + 100;

        var 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);
        }
    }
}</code>

방법 3(연결):

마지막으로 "채우기" 방법을 사용하여 HTMLSelectElement 프로토타입을 확장할 수 있습니다.

<code class="javascript">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));
    }
};</code>

위 내용은 JavaScript의 옵션을 사용하여 프로그래밍 방식으로 선택 요소를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!