某些表单值在使用.replaceWith()后未提交

Question

假设我有这样的表单：

<form action="submit" method="post">
<select name="category" id="categorylist">
<option value="love">Love</option>
<option value="magic">Magic</option>
<option value="custom">Custom</option>
</select>
<textarea name="content">SomeContent</textarea>
<input type="submit">
</form>

我想在选择自定义时将select更改为input，因此我想出了以下方法：

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

但是，当select更改为input时，当我在表单提交时转储$_POST['category']时，$_POST不在那里。为甚麽呢？

Answer 1

您应该将<select>替换为</select>，并将<input type="submit>替换为html中的<input type="submit">。使用下面的javascript，.replaceWith()和提交表单没有问题。

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

参见my test。