Javascript에서 선택할 옵션 추가

Javascript에서 선택할 옵션 추가

id="mainSelect"의 선택에서 12~100의 옵션을 만들 수 있는 Javascript를 원합니다.이는 옵션 태그를 모두 수동으로 만들고 싶지 않기 때문입니다.조언 좀 해주시겠어요?감사해요.

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 Field 데모

JS Perf에 의한 나의 답변과 Sime Vidas의 답변의 비교는, 나의 답변보다 그의 답변이 조금 더 이해하기 쉽고 직관적이라고 생각했기 때문에, 그리고 그것이 어떻게 구현으로 이어질지 궁금했기 때문에 실행되었다.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 Field 데모

그리고 마지막으로 (상당히 지연된 후에) 시제품을 확장하는 접근법이 있습니다.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 Field 데모

참고 자료:

• 를 클릭합니다node.appendChild().
• 를 클릭합니다document.getElementById().
• 를 클릭합니다element.innerHTML.

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

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>

또한 이름과 값을 구분하거나 사용된 함수에 추가 매개 변수를 사용하여 목록 시작 부분에 항목을 추가할 수도 있습니다.
HTMLSelectElement.add(항목[, 이전]);
새로운 옵션(텍스트, 값, default Selected, selected);

여기 있습니다.

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/

루프 내에서 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의 Document Fragment에 대한 자세한 내용은 다음과 같습니다.

표준 문서와 마찬가지로 노드로 구성된 문서 구조의 세그먼트를 저장하기 위해 문서의 경량 버전으로 사용됩니다.주요 차이점은 문서 조각이 실제 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');

Edit : 작성한 HTML을 다른 선택 요소에 할당하는 방법을 보여주기 위해 함수를 삭제했습니다.따라서 함수 호출을 반복함으로써 불필요한 루프를 피할 수 있습니다.

참고: jQuery를 사용하여 어레이에서 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

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

" " " " " "Option오브젝트에는 다음 2개의 파라미터가 있습니다.첫 번째는 목록에 표시할 텍스트이고 두 번째는 옵션에 할당하는 값입니다.

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

이 '다 하다'를 돼요.Option object : object배 、 object object 、 object object object object 。 §:

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

위의 솔루션 중 어느 것도 나에게 효과가 없었다.Add method를 시도해도 오류가 발생하지 않았지만 문제가 해결되지 않았습니다.결국 select2의 데이터 속성으로 문제를 해결했습니다.json을 사용하여 어레이를 얻은 후 select2 엘리먼트를 initialize로 보냅니다.자세한 내용은 아래 우편에서 확인하실 수 있습니다.

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('');

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

const mainSelect = document.getElementById("mainSelect")

This is a very easy-to-understand way to solve your problem! Hope it heps:)

언급URL : https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript