如何获取可更改元素的最新 HTML 标签，例如 JS/Jquery 中的 Select、Checkbox、Input？

Question

我需要获取可变元素的 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>
"

Answer 1

我为您制作了这个脚本希望它对您有所帮助！

 var selectBox=document.querySelector("#testSelect"); selectBox.addEventListener("change", function(){ const selectBoxOptions=selectBox.querySelectorAll("option"); selectBoxOptions.forEach((option)=>{ option.removeAttribute("selected"); }); detectOptionObjectByValue(this, this.value).setAttribute("selected", "selected"); }); function detectOptionObjectByValue(selectBox, value){ const options=selectBox.querySelectorAll("option"); let pos=0, obj=false; options.forEach(function(option){ option.value==value?obj=options[pos]:0; pos++; }); return obj; }

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

Answer 2

您可以创建一个函数来遍历所有选项并将所有selected属性设置为false

$('select option[value=' + i + ']').attr("selected",false);

然后根据选择的值将属性设置为 true

$('select option[value=' + this.value + ']').attr("selected",true);

 const dropdownElement = document.getElementById('testSelect') dropdownElement.onchange = function () { clearSelected() $('select option[value=' + this.value + ']').attr("selected",true); console.log("value selected: " + this.value); console.log("html: " + dropdownElement.innerHTML) }; // set all the options to unselected function clearSelected(){ var elements = dropdownElement.options; for(var i = 0; i < elements.length; i++){ $('select option[value=' + i + ']').attr("selected",false); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="testSelect"> <option id="no" value="0">-- not selected --</option> <option id="one" value="1" selected>1</option> <option id="two" value="2">2</option> </select>

Answer 3

在 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>