How can I get the latest HTML tags of a changeable elements, like Select, Checkbox, Input in JS/Jquery?

Question

I need to get the HTML tags of the changeable element so that I can pass them to create a PDF. But, whenever I use element.innerHTML or element.html(), I get the HTML tags generated after page load but not after I made the changes.

In HTML:

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

In JS: document.getElementById("testSelect").innerHTML

It returns:

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

And now if I manually change the value to 2, then

In JS:

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

as you can see the value is changed. But, the HTML tags won't change as

In JS:

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

Still, I get the old tags. Instead, I want something like this.

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

Answer 1

I made this script for you hope it helps you!

 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

You can make a function which will iterate through all options and set all the selected attributes to false

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

Then based on the value selected set the attribute to 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

On jQuery site you have similar question explained: 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>