具有当前表单值的innerHTML

Question

需要.innerHTML功能,但使用当前表单字段值包括输入,选择(选定选项)和textarea.

所以,给定:

<form id=f>
  <input type=text name=x />
  <select name=y>
    <option value='1'>one</option>
    <option value='2'>two</option>
  </select>
</form>

如果用户输入123,并选择选项2,则正常的f.innerHTML返回:

<input type=text name=x />
<select name=y>
  <option value='1'>one</option>
  <option value='2'>two</option>
</select>

我希望f.magicInnerHTML返回:

<input type=text name=x value='123' />
<select name=y>
  <option value='1'>one</option>
  <option value='2' selected>two</option>
</select>

反映当前的形式值.

Answer 1

对此并不完全满意，但这大部分有效：

$('input:text, input:hidden, input:password').each(function() {
  var v=this.value; 
  $(this).attr("magicmagic_value",v).removeAttr("value").val(v);
});
$('input:checkbox,input:radio').each(function() {
  var v=this.checked; 
  if(v) $(this).attr("magicmagic_checked","checked"); 
  $(this).removeAttr("checked"); 
  if(v) this.checked=true; 
});
$('select option').each(function() { 
  var v=this.selected; 
  if(v) $(this).attr("magicmagic_selected","selected"); 
  $(this).removeAttr("selected");
  if(v) this.selected=true; 
});
$('textarea').each(function() { 
  $(this).html(this.value); 
});

var magic=$('form').html().replace(/magicmagic_/g,"");

$('[magicmagic_value]').removeAttr('magicmagic_value');
$('[magicmagic_checked]').attr("checked","checked").
  removeAttr('magicmagic_checked');
$('[magicmagic_selected]').attr("selected","selected").
  removeAttr('magicmagic_selected');

alert(magic);