Javascript 如何在jQuery中将下拉列表更改为所选内容的文本框？

我有一个下拉列表，当我选择

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>

这个

如何使用jQuery实现这一点？

尝试在这种情况下使用

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

---

您可以这样使用它：

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

if ($(this).val() == 4) {
    alert("Other selected")

    //Code to change select list into textbox here
    $('#txt').show();
}
else
    $('#txt').hide();

$（'#访问'）.live（'change'，function（）{
如果（（此值）==4）{
$（this.replace为（$（“”，{type:'text}））；
}
});

代码：

$（'#访问'）.live（'change'，function（）{
如果（（此值）==4）{
警报（“其他选定”）
var html=“”；
$（“#访问”）。替换为（html）；
}
});

将以下内容添加到HTML中：

<input type="text" class="hide" id="myText"/>

您可以隐藏

$（“#myText”）.hide（）加载

但替换是个坏主意。如果用户错误地选择了其他，则无法再次获得下拉列表。因此，如果选择了另一个，则在下拉框旁边获得一个文本框

请参阅。
使用
on（）
，因为
live
已被弃用。你必须这样做：

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

if ($(this).val() == 4) {
    alert("Other selected")

    //Code to change select list into textbox here
    $('#txt').show();
}
else
    $('#txt').hide();

像这样
replaceWith
将删除
select
，这可能不是OP想要的，隐藏它更好。不过这只是我的猜测。@KingKing我也同意这一点，但他特别要求我们更改select元素作为输入element@RajaprabhuAravindasamy你能解释一下如何用下拉列表替换文本框吗？@vivek你能想出如何用下拉列表替换教科书吗？
$('#visit').live('change', function () {
    if ((this.value) == 4) {
        alert("Other selected")
        var html = "<input id='visit' type='textbox' value="
                    + 5 +" />";
        $("#visit").replaceWith(html);
    }
});

<input type="text" class="hide" id="myText"/>

 $("#visit").hide();
 $("#myText").show();

if ($(this).val() == 4) {
    alert("Other selected")

    //Code to change select list into textbox here
    $('#txt').show();
}
else
    $('#txt').hide();