자바 스크립트로 선택할 옵션 추가

모든 옵션 태그를 수동으로 생성하고 싶지 않기 때문에이 자바 스크립트가 id = "mainSelect"를 사용하여 선택에서 12에서 100 사이의 옵션을 만들고 싶습니다. 당신은 몇 가지 포인터를 줄 수 있습니까? 감사

function selectOptionCreate() {

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

  return line;
}

간단한 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의 의견에 따라 편집 :

[어떻게] [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 피들 데모 .

마지막으로 (지연 후 ...) 함수를 메소드로 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.

여기 있습니다 :

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/

가장 간결하고 직관적 인 방법은 다음과 같습니다.

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 요소 .add (item [, before]);
새로운 옵션 (텍스트, 값, defaultSelected, 선택);

루프 내에서 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 구조의 일부가 아니기 때문에 조각에 대한 변경 사항이 문서에 영향을 미치지 않거나 리플 로우를 일으키거나 변경시 발생할 수있는 성능 영향이 발생하지 않는다는 것입니다.

내가 피할 수있는 한 가지는 반복되는 페이지의 렌더링을 피하기 위해 루프에서 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을 다른 선택 요소에 할당하는 방법을 보여 주므로 함수 호출을 반복하여 불필요한 루핑을 피하십시오.

참조 : jQuery를 사용하여 배열에서 선택 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

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

새 Option객체 를 만들 때 전달할 두 개의 매개 변수가 있습니다. 첫 번째는 목록에 표시 할 텍스트이고 두 번째는 옵션에 지정할 값입니다.

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

그런 다음이 Option객체를 빈 배열 요소에 지정하면됩니다. 예를 들면 다음과 같습니다.

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

위의 해결책 중 어느 것도 나를 위해 일하지 않았습니다. 시도 할 때 Append 메소드가 오류를주지 않았지만 문제가 해결되지 않았습니다. 결국 나는 select2의 data 속성으로 내 문제를 해결했다. json을 사용하여 배열을 얻은 다음 select2 요소 초기화에 제공했습니다. 자세한 내용은 아래 게시물에서 내 답변을 볼 수 있습니다.

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

종종 관련 레코드가 배열되어 있으므로이 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('');