> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 옵션을 사용하여 프로그래밍 방식으로 선택 요소를 채우는 방법은 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-11-03 05:38:02
원래의
985명이 탐색했습니다.

How to Programmatically Populate a Select Element with Options in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿