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

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 where it can be tried is here.

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

解决方法:

尝试在此上下文中使用.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