本文實例講述了jQuery在ie6下無法設置select選中的解決方法。分享給大家供大家參考，具體如下：
這里主要解決在 ie6 下，jquery 無法設置 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">請選擇游戲大區</option> <option value="1">游戲一區</option> <option value="2">游戲二區</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 會選中第二個選項。那么當 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">請選擇游戲大區</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">請選擇游戲大區</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 報錯（無法設置 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">請選擇游戲大區</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">請選擇游戲大區</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">請選擇游戲大區</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">請選擇游戲大區</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>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery錯誤與調試技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
