如何动态地将文本字段转换为下拉列表

How to dynamically turn a text field into dropdown?

本文关键字：字段 文本 转换 下拉列表 何动态 动态      更新时间：2023-09-26

名称说明一切。我想改变一个文本字段元素到使用javascript的组合框。如果它是跨浏览器的就好了。

编辑:我可能会使用jQuery

技巧是创建下拉元素并将其添加到表单中，同时删除文本字段。你可以有这样的HTML:

<form id='myform'>
    ...
    <span id='textelement'>text goes here</span>
    <input type='button' value='change text to dropdown' onclick='change()'/>
    ...
</form>

那么change()函数可能是这样的:

function change() {
    var _form = document.getElementById('myform');
    var _text = document.getElementById('textelement');
    _form.removeChild(_text);
    var _combo = document.createElement('select');
    _combo.setAttribute('size', '1');
    _combo.setAttribute('id', 'dropdownelement');
    _form.appendChild(_combo);
    _combo = document.getElementById('dropdownelement');
    //add first value to the dropdown
    var _opt = document.createElement('option');
    _opt.text = 'New option 1';
    _opt.value = '1';
    _combo.add(_opt);
    //add second value to the dropdown
    _opt = document.createElement('option');
    _opt.text = 'New option 2';
    _opt.value = '2';
    _combo.add(_opt);
    ...
}

请注意，我还没有测试过这段代码-仅将其用作起点。

您想要更改客户端还是服务器端?如果客户端真的没有办法不使用javascript。

您可以使用InnerHTML，但它不兼容所有浏览器(不兼容:NN4, OP5, OP6)

相关文章：