首页 文章

将 value 中的每个输入替换为其 value 属性

提问于
浏览 次
0

我尝试将 html 导出为 pdf，但我无法导出表单输入字段，因此我需要将 form 标签替换为其值。

我有一个表单，包含多个标签和表单输入，如文本，复选框，单选按钮，选择等。

我想用它的 value 属性替换那个输入标签，但我不知道怎么做..

即。

<div id="Content">
    Name  : <input type="text" value="abc"/>
    Hobby : <input type="checkbox" value="abc" checked/>
            <input type="checkbox" value="abc"/>
    City  :<select class="form-control" id="EmployeeId" name="EmployeeId">
             <option value="">--Select One--</option>
             <option value="2454">Abc</option>
             <option value="2454">Def</option>
             <option value="2454" selected>Gif</option>
           </select>
</div>

如果我有这个 div 的 html 以上，那么我想要输出

Name : abc
Hobby : abc
City  : Gif
javascript jquery html

2 回答

  • 2

    使用.replaceWith，将匹配元素集中的每个元素替换为提供的新内容

    :input选择所有input，textarea，select和button元素。

    要在另一个element中显示输出，请克隆target元素并对克隆(clone())元素进行操作。

    $('#preview').on('click', function() {
  var temp = $("#Content").clone(true);
  $("#target").append(temp);
  temp.find(":input").each(function() {
    $(this).replaceWith(this.value);
  });
})

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Content">
  Name :
  <input type="text" value="abc" />
  <br>Hobby :
  <input type="checkbox" value="abc" checked/>
  <input type="checkbox" value="abc" />
  <br>City :
  <select class="form-control" id="EmployeeId" name="EmployeeId">
    <option value="">--Select One--</option>
    <option value="2454">Abc</option>
    <option value="2454">Def</option>
    <option value="2454" selected>Gif</option>
  </select>
</div>
<br>
<button id='preview'>Show Preview</button>
<h5>Target Elem</h5>
<div id='target'></div>

    **编辑：**要应用check-box的条件，请使用ternary，如下所示：$(this).replaceWith(this.type == 'checkbox' ? (this.checked ? this.value : "") : this.value);

    回复于
  • 1

    循环遍历所有元素，然后使用.after()，将新元素放在特定输入之后。然后删除当前的输入元素。

    $("#replace").click(function() {
  $(":input").each(function() {
    $(this).after($(this).val());
    $(this).remove();
  });
});

    小提琴

    回复于

相关问题