Dynamické vytvoření <option> v <select>

Při vývoji JavaScriptové části systému jsem narazil na několik věcí, které nejsou ve všech prohlížečách zcela kompatibilní. Postupně je zde budu popisovat, každý článek jeden problém.

Začnu s problémem, který vzniká v IE, když se pokoušíte dynamicky měnit položky v <select>. Máme například tento kód:

<script>
function getOptions(t) {
  t.innerHTML = "<option>Option 2</option>";
}
</script>
<select onMouseOver="getOptions(this)">
  <option>Option 1</option>
</select>

Ten však v IE nefunuje. Stačí ale, když element <option> vytvoříte přes appendChild() a vše funguje tak jak má:

<script>
function getOptions(t) {
  var option = document.createElement("option");
  option.innerHTML = "Option 2";
  t.innerHTML = "";
  t.appendChild(option);
}
</script>
<select onMouseOver="getOptions(this)">
  <option>Option 1</option>
</select>

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">