자바 스크립트를 사용하여 새 드롭 다운 만들기

Question

원래 드롭 다운에서 옵션을 선택하면 드롭 다운을 만들려고합니다.

<br> 
<select id ="select-container" onchange="addSelect('select-container');"> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
</select> 
<br> 

이 자바 스크립트입니다 :

이

는 HTML 코드입니다.

function categorygenerate() { 
    //for testing purposes 
    var categoryarray = new Array(), 
     i; 
    for (i = 0; i < 3; i++) { 
     categoryarray[i] = Math.random(); 
    } 
    return categoryarray; 
} 

function addSelect(divname) { 
    var newDiv = document.createElement('div'); 
    var html = '<select>', 
     dates = categorygenerate(), 
     i; 
    for (i = 0; i < dates.length; i++) { 
     html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>"; 
    } 
    html += '</select>'; 
    newDiv.innerHTML = html; 
    document.getElementById(divname).appendChild(newDiv); 
    console.log($("#" + divname).html()); 
    console.log(newDiv); 
} 

디버거 모드에서 오류가 표시되지 않습니다.

Answer 1

"원본 선택"에 코드를 추가하려고했기 때문입니다. select의 id을 확인하십시오.

function categorygenerate() { 
 
    //for testing purposes 
 
    var categoryarray = new Array(), 
 
     i; 
 
    for (i = 0; i < 3; i++) { 
 
     categoryarray[i] = Math.random(); 
 
    } 
 
    return categoryarray; 
 
} 
 

 
function addSelect(divname) { 
 
    var newDiv = document.createElement('div'); 
 
    var html = '<select>', 
 
     dates = categorygenerate(), 
 
     i; 
 
    for (i = 0; i < dates.length; i++) { 
 
     html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>"; 
 
    } 
 
    html += '</select>'; 
 
    newDiv.innerHTML = html; 
 
    document.getElementById(divname).appendChild(newDiv); 
 
    console.log($("#" + divname).html()); 
 
    console.log(newDiv); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br> 
 
<select onchange="addSelect('select-container');"> 
 
    <option>test1</option> 
 
    <option>test2</option> 
 
    <option>test3</option> 
 
</select> 
 
<br> 
 
<div id="select-container"></div>

Answer 2

가에서 당신의 선택 넣어 :

당신은 여기

가 작업 조각이다 "를 선택 원래"는 id="select-container"와 div 태그를 추가하고에서 제거해야 id가 select-container 인 div. 물론 다른 ID를 선택하십시오. 그러면 코드가 작동합니다. 새 select을 HTML의 원본에 추가하려고하기 때문입니다.

https://jsfiddle.net/b248a4k1/