внешнийHTML и обновления атрибутов

Question

Я пытаюсь получить HTML-код в виде строки с обновлениями атрибутов.

у меня есть select тег, параметры которого я обновляю с помощью JavaScript.

По умолчанию первый option является selected используя атрибут HTML selected="selected".

Если я отключу selected из первого варианта, используя option1.selected = false и установить option2.selected = true для второго option, а затем позвоните в outerHTML из select, Я получил

<select>
    <option selected="selected">one</option>
    <option>two</option>
    <option>three</option>
  </select>

Как вы видете, selected атрибут все еще находится на первом месте option, хотя он был перенесен на второй option.Ожидаемый результат

<select>
    <option>one</option>
    <option selected="selected">two</option>
    <option>three</option>
  </select>

Вот пример http://jsbin.com/adAbAMe/2/edit?html,js,консоль,выход (нажмите run with js получить результат), который показывает, что если selected атрибут был изменен, он не меняется в HTML-коде.

Но мне нужно получить окончательный HTML-код из externalHTML с успешными обновлениями атрибутов, потому что, если я перемещу этот select где-то я не получу никаких обновлений, которые я сделал перед использованием JavaScript.

Есть ли способ получить HTML в виде строки с реальными значениями атрибутов?

Answer 1

А selected Атрибут не обновляется автоматически, но вы можете настроить его удаление и добавление к соответствующим элементам.

//remove "selected" from first
if (i==0) {
  option.selected = false;
  option.removeAttribute("selected");
}

//add "selected" to second
if (i==1) {
  option.selected = true;
  option.setAttribute("selected", "selected");
}

Вот рабочая скрипка.

Answer 2

Вы можете использовать

option.setAttribute('selected', 'selected');

и

option.removeAttribute('selected');

Answer 3

Пытаться

$('button').click(function () {
    console.log($('select').prop('outerHTML'))
})

$('select').change(function(){
    $(this).find('option[selected]').removeAttr('selected');
    $(this).find('option:selected').attr('selected', 'selected');
})

Демо: скрипка

Answer 4

Из Спецификация DOM:

выбрано типа логическое значение

Представляет текущее состояние соответствующего элемента управления формой в интерактивном пользовательском агенте.Изменение этого атрибута меняет состояние элемента управления формой, но не меняет значение выбранного атрибута HTML элемента.

(выделено мной)

Чтобы получить желаемый эффект, вам нужно option.setAttribute('selected', 'selected'), хотя вам также понадобится option.removeAtrribute('selected') по остальным вариантам.