Как я могу получить последние HTML теги изменяемых элементов, таких как Select, Checkbox, Input in JS / Jquery?

Question

Мне нужно получить теги HTML сменного элемента, чтобы я мог передать их для создания PDF. Но всякий раз, когда я использую element.inner HTML или element. html (), я получаю теги HTML, созданные после загрузки страницы, но не после внесения изменений.

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

Возвращает:

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

Вы можете создать функцию, которая будет перебирать все параметры и устанавливать для всех атрибутов selected значение false

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

Затем на основе выбранного значения установить атрибут истинно

$('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 2

На 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>

Answer 3

Я сделал этот скрипт для вас, надеюсь, он вам поможет!

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>