Dropdown Option set innerHTML также устанавливает значение

Question

Я только что узнал, что в FF, если вы динамически создаете элемент OPTION DOM внутри элемента SELECT и просто устанавливаете его innerHTML, он устанавливает как innerHTML, т.е. отображаемый текст, так и значение OPTION. *

var opt = document.createElement ('OPTION'); opt.innerHTML = 'Opt';

это также устанавливает атрибут "value" элемента.

Это правильное поведение? Я не смог повторить это для IE.

Answer 1

Если вы специально не устанавливаете другое значение для атрибута value, по умолчанию используется текст в опции.

Правильно ли это поведение или нет для атрибута innerHTML, чтобы изменить атрибут value, невозможно сказать. Атрибут innerHTML не охватывается стандартами, поэтому, если есть что-то, что является правильным поведением, он вообще не будет поддерживать атрибут.

Вы должны использовать атрибут text, чтобы задать текст опции, который является атрибутом, указанным в стандартах.

Answer 2

innerHTML не очень хорошо определен здесь.

https://developer.mozilla.org/En/DOM/Element.innerHTML

Так как нет публичной спецификации для этого свойства, реализации отличаются друг от друга Например, когда текст вводится в текстовый ввод, IE будет изменить атрибут значения входное свойство innerHTML, но Gecko браузеры нет.

вы можете использовать что-то вроде следующего кода для добавления элементов option в элемент select:

var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];  
try {
  elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}
catch(ex) {
  elSel.add(elOptNew, elSel.selectedIndex); // IE only
}

Answer 3

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

alert(opt.value);

Он вернет значение атрибута значения , если оно существует , но вернет значение, содержащееся в тегах параметров, в качестве запасного варианта. В вашем примере вы можете независимо установить атрибут значения с помощью

opt.value = "some value"

Если вы сделаете это, значения и значения innerHTML будут возвращать независимые значения.