jQuery kullandığım bir projede, seçim kutusu(select elemanı) seçeneklerini(option) değişkende saklayarak, istediğim zaman istediğim kadar kullanmayı planladım. Daha iyi anlaşılabilmesi için ufak bir kod örneği vereyim;
var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
$('#Baslangic').html(secenekler);
$('#Varis').html(secenekler);
Buraya kadar bir sorun ortaya çıkmadı. Ne zaman ki, bu şekilde doldurduğum seçim kutularında bir elemanı seçili hale getirmeye çalıştım, işte o zaman Internet Explorer 6’da (IE6) garip bir hata mesajı ile karşılaştım: “Could not set the selected property. Unspecified error.” IE7, IE8, Firefox, Opera, Chrome ve Safari’de sorunsuz bir şekilde çalışırken, IE6 bu şekilde, anlaşılmaz bir hata mesajı ile beni çıkmaza soktu. Seçim yapmak için kullandığım kod öbeğini de eklersek kod örneğimiz şu hale geliyor;
var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
$('#Baslangic').html(secenekler).val(34);
$('#Varis').html(secenekler).val(35);
Hata mesajının ilk bölümü, kısmen problemin neden kaynaklandığını açıklasa da ikinci bölümdeki “Belirsiz hata” ibaresi direkt olarak bir çözüme yönlenmemi engelledi. Internetlerde yaptığım ufak bir araştırma ile bu sayfada probleme ve olası bir çözüme ulaştım. Problem IE6’da DOM’un yeteri kadar hızlı çalışamamasından kaynaklanıyormuş. DOM ağacını zamanında hazırlayamadığı için, seçim yapmak istediğimizde seçim kutusunda ilgili elemanı bulamıyor ve ilgili hata mesajını ekrana basıyor.
Problemi çözmek için bir çok alternatif yöntem uygulayabilirsiniz. Problem ile ilgili bilgi bulduğum sayfadaki çözüm, try/catch bloğunu iş akışının bir parçası olarak kullandığından benim gözümde ideal bir çözüm değil. Tabi tercih size kalmış. Benzer bir durum için benim önerebileceğim çözüm şu olabilir;
var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
var $Baslangic = $('#Baslangic').html(secenekler);
var $Varis = $('#Varis').html(secenekler);
if($.browser.msie && $.browser.version === "6.0") {
setTimeout(function() {
$Baslangic.val(34);
$Bitis.val(35);
}, 1);
}
else {
$Baslangic.val(34);
$Bitis.val(35);
}
İşin püf noktası, tarayıcı IE6 ise, seçim işlemlerini 1 milisaniyelik bir gecikme ile gerçekleştirip, bu ufacık gecikme ile DOM’a kendini toparyalabilmesi için zaman tanımak.
Alternatif olarak, imkanınız varsa, seçeneklerden seçili olmasını istediğiniz elemana da selected=”selected” özelliğini atayarak bu hatadan kaçınabilirsiniz. Bu örnekte aynı seçenekleri birden çok kez kullanacağım için ve varsayılan olarak belirli bir tanesini seçili durumda oluşturamayacağım için bu şekilde bir çözüm yoluna gittim.