텍스트 상자를 다른 html 요소로 변환

Question

<form name="txt" method="post"> 

<input type="text" name="select" id="select" onclick="return selectbox();"> 
</form> 

이제 js 또는 html을 통해 텍스트 상자를 선택 또는 목록 상자로 변경할 수 있습니다. 어떤 방법 으로든 가능합니까? 이 같은

// JS 코드

function selectbox() 
{ 
var select=document.getElementById('select'); 
select.innerHTML="<select><option>1</option><option>2</option></select>"; 
} 

뭔가 발생한다. 텍스트 상자의 대신에 아래의 코드는 새 텍스트 상자 // 를 나타납니다 예를 들어

<select><option>1</option><option>2</option></select> 

Answer 1

예 :

이

var select = document.createElement("select"); 
select.innerHTML = "<option value='1'>One</option>" + 
        "<option value='2'>Two</option>" + 
        "<option value='3'>Three</option>"; 
select.id = "select"; 
select.name = "select"; 
select.onclick = function(){return selectbox()}; 
var currentSelect = document.getElementById("select"); 
currentSelect.parentNode.replaceChild(select, currentSelect); 
select.focus(); //Focus on the element 

이 코드는 <select> 요소를 만들고 통해 새로운 옵션을 추가 .innerHTML. 그런 다음 특성이 설정됩니다. 마침내. 스크립트는 HTML. 서에서 id="select"으로 현재 요소를 선택하고 요소를 새로 작성된 요소로 바꿉니다.

Answer 2

자세한 내용과 방법에 대해 자세히 알아보십시오. 당신은

function selectbox(Sender){   
    var select = document.createElement('select'); 
    //UPDATE 
    for(var i=1; i<=2; i++) 
     select.options[select.options.length] = new Option(i, i); 
    Sender.parentNode.appendChild(select); 
    Sender.parentNode.removeChild(Sender); 
}