Как динамически превратить текстовое поле в выпадающий список?

Question

Имя говорит все. Я хочу изменить элемент текстового поля в поле со списком с помощью JavaScript. Будет хорошо, если это кросс-браузер.

РЕДАКТИРОВАТЬ: я могу использовать jQuery

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

Обратите внимание, что я не проверял этот код - используйте его только как отправную точку.

Answer 2

Вы можете использовать InnerHTML, но он не совместим со всеми браузерами (несовместим с: NN4, OP5, OP6)

Answer 3

Вы хотите изменить его на стороне клиента или на стороне сервера.Если на стороне клиента действительно нет пути без использования какого-либо javascript.