PDA

View Full Version : IE8 error creating 'option' Element



g2mac
18 Jan 2010, 6:33 AM
Hello!

The task was to change content of dependent SELECT. We select main SELECT and our subSELECT changes his content. All browsers work correct, but under IE8 I have an empty subSELECT and a very strange result code like <select>value</option>value2</option>...
Here is simple sample about this error:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Ext.Core Example Page</title>
<script type="text/javascript" src="../ext-core-debug.js"></script>
<script type="text/javascript">
var Sel = {
v1: [{value:11,name:'value11'},{value:12,name:'value12'}],
v2: [{value:21,name:'value21'},{value:22,name:'value22'}]
}
Ext.onReady(function(){
var tpl = new Ext.Template('<option value="{id}">{name}</option>');
tpl.compile();
Ext.get(Ext.query('select')[0]).on('change',function(){
var subSelect = Ext.query('select')[1];
subSelect.innerHTML = "";
for(var i = 0; i < Sel[this.dom.value].length; i++){
tpl.append(subSelect, Sel[this.dom.value][i]);
}
});
});
</script>

</head>
<body>
<h1>Welcome to ExtJS.Core!</h1>
<h2>Select.Option</h2>
<select><option value="v1">value1</option><option value="v2">value2</option></select>
<select><option>subvalue11</option><option>subvalue12</option></select>
</body>
</html>

I have tried many various ways to generate childNodes (option) for SELECT but anyway I'm getting <select>value</option>value2</option>...

Condor
18 Jan 2010, 6:57 AM
You can't create options with HTML manipulation.

You have to create Option objects manually.

g2mac
18 Jan 2010, 7:15 AM
Why?
It works good everywhere except IE.
So, I can create LI with HTML manipulation (like in API Docs), but OPTION can't. Am I right?

g2mac
18 Jan 2010, 7:16 AM
Please, show me an example of creating Option objects for my task.

Condor
18 Jan 2010, 7:59 AM
This is not a problem in Ext, it's just that IE doesn't support it.

The original bugreport (http://www.extjs.com/forum/showthread.php?p=9414#post9414) contains an example of how to add new Options.