How to dynamically turn a text field into dropdown?

The name says all. I want to change a text field element into combo box using javascript. It will be nice if it's cross-browser.

开发者_如何学运维EDIT: I may use jQuery

The trick is to create the dropdown element and add it to the form, as well as remove the text field. You can have HTML like this:

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

Then your change() function could be something like this:

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

Note that I haven't tested this code - use it as a starting point only.

Are you wanting to change it client side or server side. If client side there really is not way without using javascript of some sort.

You can use InnerHTML but it isn't compatible with all browsers (Not compatible with: NN4 , OP5, OP6)