Question

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

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

现在可以通过js或html将文本框更改为选择列表框或列表框。是否有可能。

// js code

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);
}

将文本框转换为任何其他html元素

2 个答案: