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

时间:2011-07-07 15:18:40

标签: javascript dom cross-browser

这个名字都说明了。我想使用javascript将文本字段元素更改为组合框。如果它是跨浏览器的话会很好。

编辑:我可以使用jQuery

3 个答案:

答案 0 :(得分:1)

诀窍是创建下拉元素并将其添加到表单,以及删除文本字段。您可以使用以下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);
    ...
}

请注意,我尚未测试此代码 - 仅将其用作起点。

答案 1 :(得分:0)

您是否想要更改客户端或服务器端。如果没有使用某种类型的javascript,客户端确实没有办法。

答案 2 :(得分:0)

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