jQuery在ie6下無法設(shè)置select選中的解決方法詳解
更新時間：2016年09月20日 11:59:13 作者：朱羽佳
這篇文章主要介紹了jQuery在ie6下無法設(shè)置select選中的解決方法,結(jié)合實(shí)例分析了jQuery在ie6下無法設(shè)置select選中的原因與相關(guān)處理技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery在ie6下無法設(shè)置select選中的解決方法。分享給大家供大家參考，具體如下：
這里主要解決在 ie6 下，jquery 無法設(shè)置 select 選中的問題。我們先看個例子：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>demo</title>
</head>
<body>
<select name="gameZone" id="gameZone">
<option value="0">請選擇游戲大區(qū)</option>
<option value="1">游戲一區(qū)</option>
<option value="2">游戲二區(qū)</option>
</select>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.each($('#gameZone > option'),function(){
if($(this).val() == '1'){
$(this).attr('selected','selected');
}
});
});
</script>
以上代碼在所有瀏覽器中都沒有問題，打開頁面 select 會選中第二個選項(xiàng)。那么當(dāng) select 里的內(nèi)容是動態(tài)添加的，又會是怎樣的情況呢？
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>demo</title>
</head>
<body>
<select name="gameZone" id="gameZone">
<option value="0">請選擇游戲大區(qū)</option>
</select>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]';
function showZone(){
var serversLists = eval(servers);
var serversHtml = '<option value="0">請選擇游戲大區(qū)</option>';
for(var i = 0; i < serversLists.length; i++){
serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>';
}
return serversHtml;
};
$(function(){
$('#gameZone').html(showZone());
$.each($('#gameZone > option'),function(){
if($(this).val() == 'dx1'){
$(this).attr('selected','selected');
}
});
});
</script>
我們可以看到在 chrome，firefox，ie8，ie7 這些瀏覽器都沒有問題，但是在蛋疼的 ie6 瀏覽器中會 js 報錯（無法設(shè)置 selected 屬性，未指明的錯誤）。
解決方法有兩種：setTimeout 和 try/catch
第一種：setTimeout（推薦）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>demo</title>
</head>
<body>
<select name="gameZone" id="gameZone">
<option value="0">請選擇游戲大區(qū)</option>
</select>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]';
function showZone(){
var serversLists = eval(servers);
var serversHtml = '<option value="0">請選擇游戲大區(qū)</option>';
for(var i = 0; i < serversLists.length; i++){
serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>';
}
return serversHtml;
};
$(function(){
$('#gameZone').html(showZone());
setTimeout(function(){
$.each($('#gameZone > option'),function(){
if($(this).val() == 'dx1'){
$(this).attr('selected','selected');
}
});
},1);
});
</script>
第二種：try/catch
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>demo</title>
</head>
<body>
<select name="gameZone" id="gameZone">
<option value="0">請選擇游戲大區(qū)</option>
</select>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]';
function showZone(){
var serversLists = eval(servers);
var serversHtml = '<option value="0">請選擇游戲大區(qū)</option>';
for(var i = 0; i < serversLists.length; i++){
serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>';
}
return serversHtml;
};
$(function(){
$('#gameZone').html(showZone());
try{
$.each($('#gameZone > option'),function(){
if($(this).val() == 'dx1'){
$(this).attr('selected','selected');
}
});
}catch(e){}
});
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery錯誤與調(diào)試技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 解決jQuery ajax請求在IE6中莫名中斷的問題
- jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
- jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
- jquery submit ie6下失效的原因分析及解決方法
- 解決jquery的.animate()函數(shù)在IE6下的問題
- 關(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法
- jQuery:delegate中select()不起作用的解決方法(實(shí)例講解)
- jquery html動態(tài)生成select標(biāo)簽出問題的解決方法
- jQuery選中select控件 無法設(shè)置selected的解決方法
- jQuery 跨域訪問問題解決方法
- jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
相關(guān)文章
這邊文章主要給大家介紹了jQuery原型屬性constructor,selector,length,jquery和原型方法size,get,toArray，十分的詳細(xì)，有需要的小伙伴可以參考下。2015-07-07
jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
jquery+css實(shí)現(xiàn)移動端元素拖動排序
這篇文章主要為大家詳細(xì)介紹了jquery+css實(shí)現(xiàn)移動端元素拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法,可實(shí)現(xiàn)每隔10條li元素增加一條虛線的功能,涉及jQuery元素的匹配與屬性動態(tài)設(shè)置技巧,需要的朋友可以參考下2016-06-06
最近做一個項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過程中發(fā)現(xiàn)會有好多自己考慮不到的問題，下面以一個示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery如何分別獲取選中的復(fù)選框值,需要的朋友可以參考下2014-06-06
這篇文章給大家介紹了jquery 圖片輪播代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
使用PHP+JQuery+Ajax分頁的實(shí)現(xiàn)
本篇文章小編將為大家介紹，使用PHP+JQuery+Ajax分頁的實(shí)現(xiàn)。需要的朋友參考下2013-04-04
jQuery 學(xué)習(xí)入門篇附實(shí)例代碼
這篇文章比較不錯，更重要的是一些實(shí)例代碼，對于想學(xué)習(xí)jquery的朋友是個不錯的資料。2010-03-03
jquery實(shí)現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
如何實(shí)現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件，下面有個不不錯的示例使用jquery實(shí)現(xiàn)的，感興趣的朋友可以參考下2014-01-01