如何将下拉列表更改为jQuery中选择的文本框？

Question

我有一个下拉列表,我希望它在我选择Other选项时更改为空文本框.

HTML代码:

<select id='visit'>
    <option value='1' class='volunteer'>Romania</option>
    <option value='2' class='volunteer1'>Slovakia</option>
    <option value='3' class='volunteer2'>Belgium</option>
    <option value='4' class='volunteer3'>Other</option>
</select>

这是最初的JavaScript代码:

$('#visit').live('change', function () {
    if ((this.value) == 4) {
        alert("Other selected")
        //Code to change select list into textbox here
    }
});

可以尝试的JSFiddle就在这里.

我怎么能用jQuery做到这一点？

Answer 1

尝试.replaceWith()在这种情况下使用,

$(this).replaceWith('<input/>');

DEMO

完整的代码是,

$('#visit').live('change', function () {
    if ((this.value) == 4) {
      $(this).replaceWith($('<input/>',{'type':'text','value':'other'}));  
    }
});

DEMO

像每个人所说的那样替换select元素似乎是一个坏主意.因此,尝试根据用户的选择显示/隐藏输入元素.

尝试,

$("input[type=text]").hide();
$('#visit').live('change', function () {  
    $(this).next('input[type=text]').toggle((this.value) == 4)
});

DEMO