如何獲取可更改元素的最新 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>