Get datalist options in IE9 with JavaScript
This code works in all major browsers except Internet Explorer 9. I don't understand what I'm doing wrong, it's probably something simple that I'm missing.
Copy this code (or use this jsFiddle) to see the problem in IE9:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
//document.createElement('datalist');//this seems to fix it for IE6, but not for IE9
window.onload = function() {
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
};
</script>
</head>
<body>
<form method="post">
<input name="language" type="text" value="English" list="languages" />
<datalist id="languages">
<option value="Arabic" />
<option value="Bengali" />
<option value="Bulgarian" />
<option value="Catalan" />
<option value="Chinese" />
<option value="Croatian" />
<option value="Czech" />
<option value="Danish" />
<option value="Dutch" />
<option value="English" />
<option value="Filipino" />
<option value="Finnish" />
<option value="French" />
<option value="German" />
<option value="Greek" />
<option value="Gujarati" />
<option value="Hebrew" />
<option value="Hindi" />
<option value="Hungarian" />
<option value="Indonesian" />
<option value="Italian" />
<option value="Japanese" />
<option value="Kannada" />
<option value="Korean" />
<option value="Latvian" />
<option value="Lithuanian" />
<option value="Malay" />
<option value="Malayalam" />
<option value="Marathi" />
<option value="Norwegian" />
<option value="Oriya" />
<option value="Persian" />
<option value="Polish" />
<option value="Portuguese" />
<option value="Romanian" />
<option value="Russian" />
<option value="Serbian" />
<option value="Slovak" />
<option value="Slovenian" />
<option value="Spanish" />
<option value="Swedish" />
<option value="Tamil" />
</datalist>
</form>
</body>
</html>
I would like it to be as cross browser as possible in the end.
Answer
IE 9 ignores option elements that aren't direct children of a select element (or an optgroup within one). A simple workaround is to wrap your option elements in a hidden select element using conditional comments:
<datalist id="languages">
<!--[if IE 9]><select disabled style="display:none"><![endif]-->
<option value="Arabic">
...
<!--[if IE 9]></select><![endif]-->
</datalist>
Here's a jsFiddle demo of this approach.
2017 Update: It's worth noting that as of July 2017 Safari on iOS & Mac still haven't added support for <datalist> elements. OP asked for a solution that works will all major browsers so this probably isn't the best solution to that effect.
More info here: http://caniuse.com/#search=datalist