Задача: есть выпадающий список, нужно что бы при навигации по элементам списка менялась картинка расположенная рядом со списком.
Написал такой код:
<script language="javascript" type="text/javascript" src="./js/flags.js"></script>
<center style="position:relative; left:-30px;">
<div id="flags" style="background:white url([url]http://localhost/flag_am.gif[/url]) no-repeat; width:30px; height:15px;">
</div>
</center>
<div style="text-align:center; position:relative; top:-18px; left:50px;">
<select id="sel">
<option selected value="0">Азербайджан</option>
<option value="1">Армения</option>
<option value="2">Беларусь</option>
</select>
</div>
flags.js такой:
var m_ImgArray = new Array();
m_ImgArray[0] = 'http://localhost/flag_am.gif';
m_ImgArray[1] = 'http://localhost/flag_az.gif';
m_ImgArray[2] = 'http://localhost/flag_by.gif';
var g_Selected = -1;
setTimeout("OnChange()", 300);
function OnChange()
{
var selObj = document.getElementById("sel");
if (g_Selected != selObj.value)
{
g_Selected = selObj.value;
$('flags').style.background = 'white url('+ m_ImgArray[g_Selected] +') no-repeat ';
// For IE lt 7.0 small hack
if (Object.isString($('flags').style.behavior))
{
$('flags').runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + m_ImgArray[g_Selected] + "', sizingMethod='crop')",
$('flags').runtimeStyle.backgroundImage = "none";
}
}
setTimeout("OnChange()", 300);
}
В FF все работает на ура, а вот в IE не работает, так как value не меняет значение до тех пор пока я не кликну на выбранном элементе списка. Как решить проблему?