使用jQuery下拉列表到文本字段？

Question

我想有一个带有选项A,B,C和Custom的下拉列表.选择自定义后,下拉列表将替换为文本字段,以便用户可以提供自定义名称,如果他愿意的话.

所以,首先我们有这样的事情

<select id="foo" name="foo">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="custom">Custom</option>
</select>

选择自定义后,整个下拉列表将转换为:

<input name="foo" type="text" />

Answer 1

这是一个demo使用.replaceWith()功能:

$('#foo').change(function() {
    if ($(this).val() === 'custom') {
        $(this).replaceWith('<input name="foo" type="text" />');
    }
});