时间戳

首页 > 解决方案 > 如何获取可变元素的最新 HTML 标签，如 JS/Jquery 中的 Select、Checkbox、Input？

javascript - 如何获取可变元素的最新 HTML 标签，如 JS/Jquery 中的 Select、Checkbox、Input？

问题描述

我需要获取可变元素的 HTML 标签，以便可以将它们传递给创建 PDF。但是，每当我使用 element.innerHTML 或 element.html() 时，我都会在页面加载后生成 HTML 标签，但在我进行更改后不会。

在 HTML 中：

<select id="testSelect">
    <option id="no">-- not selected --</option>
    <option id="one" selected>1</option>
    <option id="two">2</option>
</select>

在 JS 中：document.getElementById("testSelect").innerHTML

它返回：

"
    <option id="no">-- not selected --</option>
    <option id="one" selected="">1</option>
    <option id="two">2</option>
"

现在，如果我手动将值更改为 2，那么

在 JS 中：

document.getElementById("testSelect").value
"2"

如您所见，值已更改。但是，HTML 标签不会改变为

在 JS 中：

document.getElementById("testSelect").innerHTML
"
    <option id="no">-- not selected --</option>
    <option id="one" selected="">1</option>
    <option id="two">2</option>
"

不过，我得到了旧标签。相反，我想要这样的东西。

"
    <option id="no">-- not selected --</option>
    <option id="one">1</option>
    <option id="two" selected="">2</option>
"

标签： javascriptjqueryhtml

解决方案

在 jQuery 网站上，您解释了类似的问题： https ://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

$(function(){
  $('#select').change(function(){
    $('#output-value').text($(this).val());//get value
    $('#output-element').text($(this).find('option:selected').text());//get text of selected element
    $(this).find('option').each(function(){
      $(this).attr('selected', $(this).is('option:selected')); //adds and removes selected attribute
    });
    $('#output-html').text($(this).html());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" >
  <option>--</option>
  <option value="1" >1 val</option>
  <option value="2" >2 val</option>
  <option value="3" >3 val</option>
</select>
<br/>
Value
<div id="output-value" ></div>
Element
<div id="output-element" ></div>
HTML
<div id="output-html"></div>

推荐阅读