如何動態地將文本字段變爲下拉菜單？

Question

名稱全稱。我想使用javascript將文本字段元素更改爲組合框。如果它是跨瀏覽器將會很好。

編輯：我可以使用jQuery

Answer 1

你想改變它的客戶端或服務器端。如果客戶端真的沒有使用某種類型的javascript的方式。

Answer 2

您可以使用innerHTML但並不是所有的瀏覽器（不兼容：NN4，OP5，OP6）兼容

Answer 3

關鍵是要創建下拉元素，並將其添加到形式，以及刪除文本字段。你可以有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); 
    ... 
} 

請注意，我沒有測試此代碼 - 使用它作爲只是一個起點。