Я недавно сталкивался с этой проблемой в IE. Я нашел готовое решение, которое работает с учетом следующих факторов:
- Вы не хотите использовать jQuery
- Нужно, чтобы он работал в IE <9 </li>
- Вы хотите добавить (не заменять существующие опции) строковые опции в существующий элемент select
- Выбор должен быть типом "select-one"
- Обернуть выделенные элементы в их собственный родительский элемент
У нас много целевых страниц, запрашивающих одну и ту же информацию (возраст, продукты, страна, штат и т. Д.), Но с различными вариантами выбора. Реализация, которую я использую, добавляет новые опции выбора. Это было сделано для того, чтобы разрешить настраиваемую опцию по умолчанию для каждой начальной страницы. Одна страница может иметь первую опцию «выбрать элемент», другая может иметь «выбрать одну» и т. Д.
Выберите формат:
<div> <!-- you MUST wrap the select in a tag without any siblings -->
<select name="age" id="form-age">
<option value="">Choose Age</option>
</select>
</div> <!-- you MUST wrap the select in a tag without any siblings -->
Вот функция для добавления / добавления значений:
function addOptions(el, options){
// checks to make sure element exists and is a select
if(el && el.type === "select-one"){
el.innerHTML = el.innerHTML + options;
el.parentNode.innerHTML = el.outerHTML; // needed for IE
}
}
Теперь для выполнения функции передайте в select объект и строковые значения:
addOptions(
document.getElementById("form-age"),
'<option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>'
);
Это создаст выбор с переданными параметрами, даже в IE!
<div> <!-- you MUST wrap the select in a tag without any siblings -->
<select name="age" id="form-age">
<option value="">Choose Age</option>
<option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>
</select>
</div> <!-- you MUST wrap the select in a tag without any siblings -->
Если вам нужен сценарий для ЗАМЕНЫ значений, используйте следующее:
function replaceOptions(el, options){
if(el && el.type === "select-one"){
el.innerHTML = options;
el.parentNode.innerHTML = el.outerHTML; // needed for IE
}
}
Надеюсь, это поможет кому-то еще!