Изменение .html() <option> сбрасывает свойство selectedIndex <option> от '-1' до '0'

Использование jQuery при смене .html() <option> внутри a <select> (которое я ранее задал для свойства selectedIndex значение -1) сбрасывает свойство selectedIndex <select> из '-1' до '0'

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<select id="myselect" class="drpmnu">

   <option id="one" >(01)</option>

   <option id="two" >(02)</option>

   <option id="three" >(03)</option>

</select>
  <script>
    $(".drpmnu").prop('selectedIndex', -1)
    $('#three').html("moo")
  </script>
</body>
</html>

http://jsbin.com/filowe/2/edit?html,output

Ответы

Ответ 1

Этот случай упоминается в спецификации HTML5:

При настройке атрибут selectedIndex должен установить для всех элементов опции в списке параметров значение false, а затем option в списке опций, индексом которого является заданное новое значение, если оно есть, должно быть установлено, что его выделение установлено в true, а его грязность - true.

Примечание.. Это может привести к тому, что ни один элемент, для которого выбранная функция не установлена ​​равным true, даже в случае элемента выбора, не имеющего множественного атрибута, и размера экрана 1.

...

Если узлы вставлены или удалены узлы, что приводит к тому, что список параметров получает или теряет один или несколько элементов опций или если элемент опций в списке опций запрашивает reset, то, если атрибут множественного выбора элемента отсутствует, размер отображения элемента выбора равен 1, и никакие элементы-опции в списке элементов выбора элементов не имеют установленную для них истину, пользовательский агент должен установить выбранность первого элемента параметра в списке параметров в древовидном порядке, который не отключен, если таковой имеется, для истины.

Изменение параметра с помощью его свойства innerHTML или textContent запускает этот reset (кроме Firefox), но свойство text (только <option>) не вызывает его (кроме IE).

// these triggers the <select> element reset (except on Firefox)
$("#three")[0].innerHTML   = "foo";
$("#three")[0].textContent = "foo";

// this does not trigger the reset (except on IE)
$("#three")[0].text = "foo";

Firefox следует строго строго, он только сбрасывает <select>, если есть новый <option>, или было удаление одного из <option> s. Но он не может выполнить reset при установке свойства <option> selected на false (но который должен запускать reset тоже).

Короче говоря, все текущие браузеры полностью не реализуют спецификацию, поэтому единственным кросс-платформенным решением является изменение selectedIndex в качестве последней операции над элементом выбора (и его дочерними элементами):

$("#three").html("moo");
$(".drpmnu").prop("selectedIndex", -1);

Ответ 2

В разных браузерах поведение различно. Я просто проверил в firefox и работал без ошибок. Он показал мне пустое раскрывающееся меню, и я проверил, что выбранный индекс был -1. В Chrome все же было не так.

В идеале, -1 используется для выбора, когда в старте не выбран параметр. Я не уверен, что -1 можно установить программно во всех браузерах.

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

var i = 0;
$(".drpmnu").change(function (e) {
    i++;
    $('#three').html("data" + i);
})

Ответ 3

Сначала я просмотрел функцию JQuery . html(), но не смог найти ничего, что могло бы вызвать проблему. Затем я попытался изменить innerHTML свойство без jquery (это то, что я должен был сделать первым). Он выглядит нормально в Firefox 33.1 и 34.0.5, но сбрасывает selectedIndex с помощью Chrome 40.0.2214.94, IE 10 и Opera 27.0.1689.66.

Я думаю, это доказывает, что комментарий @Blake Plumb верен для некоторых браузеров.

Это проблема перекраски. При изменении текста параметра происходит выбор перекрашивать. В перерисовке есть проблема, по которой prop получает reset до значение по умолчанию.

Ответ 4

Это потому, что вы устанавливаете содержимое HTML $('#three') после предварительной установки индекса. Поэтому, если вы хотите сохранить индекс -1, измените свой код на порядок.

<script>
    $('#three').html("moo");
    $(".drpmnu").prop('selectedIndex', -1);
</script>

Событие onchange автоматически запускается при изменении значения элемента. Таким образом, индекс reset индекса.