javascript - 如何将下拉列表更改为 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 where it can be tried is here .

我如何使用 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