安科网

jQuery在ie6下无法设置select选中的解决方法详解

seoppt

seoppt

2016-09-20

关注 关注

本文实例讲述了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程序设计有所帮助。

select jquery

seoppt

seoppt

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Golang 定时器(Timer 和 Ticker),这篇文章就够了

Golang 原生 time 包下可以用来执行一些定时任务或者是周期性的任务的一个工具。本文基于 Go 1.14，如果以下文章有哪里不对或者问题的地方，欢迎讨论学习。定时器的日常使用。timer.Stop() // 这里来提高 timer 的回收。tCha

专注前端开发 2020-10-21

Mysql 实现字段拼接的三个函数

给运营导出数据时，难免需要对字段进行拼接，如果 Mysql 可以完成的话，就可以少些很多代码。不过如果有字段值为 NULL，则结果为 NULL。上面这种方式如果想要使用分隔符分割，就需要每个字段中间插一个字符串，非常麻烦。concat_ws() 可以一次性

苏康申 2020-11-13

详解 MySQL中count函数的正确使用方法

当搞清楚count函数的运行原理后，相信上面几个问题的答案就会了然于胸。为了解决上述的问题，我创建了一张 user 表，它有两个字段：主键id和name，后者可以为null，建表语句如下。`id` int NOT NULL AUTO_INCREMENT C

vitasfly 2020-11-12

oracle锁表该如何解决

where l.object_id　=　o.object_id and l.session_id=s.sid;如果杀不掉可以加个 immediate 立即杀掉 试试；如果利用上面的命令杀死一个进程后，进程状态被置为"killed"，但是

oraclemch 2020-11-06

SQL Server如何通过创建临时表遍历更新数据详解

前段时间新项目上线为了赶进度很多模块的功能都没有经过详细的测试导致了生成环境中的数据和实际数据对不上，因此需要自己手写一个数据库脚本来更新下之前的数据。关于数据统计汇总的问题肯定会用到遍历统计汇总，那么问题来了数据库中如何遍历呢？好像并没有for和fore

liuyang000 2020-09-25

ThinkPHP5 链式操作table用法

table方法主要用于指定操作的数据表。用法一般情况下，操作模型的时候系统能够自动识别当前对应的数据表，所以，使用table方法的情况通常是为了：。需要注意的是table方法不会改变数据库的连接，所以你要确保当前连接的用户有权限操作相应的数据库和数据表。切

FellowYourHeart 2020-10-05

sql注入 --显错注入

jiong 2020-09-17

Orcle11G创建表空间，创建用户，授权等操作

CREATE USER caiyl IDENTIFIED BY 123456 DEFAULT TABLESPACE caiyl_space;GRANT CREATE USER,DROP USER,ALTER USER ,CREATE ANY VIEW ,A

赵继业 2020-08-17

SQL 创建、更新和删除视图的方法

视图是可视化的表。本章讲解如何创建、更新和删除视图。视图包含行和列，就像一个真实的表。您可以向视图添加 SQL 函数、WHERE 以及 JOIN 语句，也可以呈现数据，就像这些数据来自于某个单一的表一样。视图 "Current Product L

whyname 2020-08-16

oracle 日期操作语句总结

SELECT TO_CHAR AS YEAR FROM DUAL--查询当前年份。SELECT TO_CHAR AS MONTH FROM DUAL--获取当前日期的'YYYY/MM/DD'格式：2020/01/02. SELECT TO_CHAR AS

Seandba 2020-08-16

ORACLE数据库中Rownum用法详解

ORACLE 中ROWNUM用法总结!对于 Oracle 的 rownum 问题，很多资料都说不支持>,>=,=,between...and，只能用以上符号(<、<=、!=)，并非说用>,& gt;=,=,betwee

dbasunny 2020-08-16

MySQL如何创建视图

可以使用 CREATE VIEW 语句来创建视图。该名称在数据库中必须是唯一的，不能与其他表或视图同名。用户除了拥有 CREATE VIEW 权限外，还具有操作中涉及的基础表和其他视图的相关权限。SELECT 语句不能包含 FROM 子句中的子查询。可使用

拼命工作好好玩 2020-08-15

详细分析mysql视图的原理及使用方法

在MySQL中，视图可能是我们最常用的数据库对象之一了。那么你知道视图和表的区别吗？可能很多人对视图只是一知半解，想详细了解视图的同学看过来哟，本篇文章会详细介绍视图的概念、创建及使用方法。当我们创建一个视图的时候，实际上是在数据库里执行了SELECT语句

langyue 2020-08-15

MySQL约束

分别查询男、女同学的平均分,人数 要求：分数低于70分的人，不参与分组,分组之后。

好记忆也需烂 2020-08-15

MySQL实现根据当前ID读取上一条和下一条记录

SELECT * FROM A WHERE ID < 5 ORDER BY ID DESC LIMIT 0,1; ps: select * from table1 where id<$id order by iddesc limit

写程序的赵童鞋 2020-08-03

mysql 14 覆盖索引+回表

MySQL可以利用索引返回select列表中的字段值。而不必根据主键再次读取聚簇索引数据文件查到数据，也就是平时所说的不需要回表操作。覆盖索引其实是索引覆盖的意思，索引字段就已经囊括select查询的字段，即索引字段覆盖了需查询的字段。t; 即id是聚集索

Accpcjg 2020-08-02

go语言中——select的使用方法

早期的select函数是用来监控一系列的文件句柄，一旦其中一个文件句柄发生IO操作，该select调用就会被返回。golang在语言级别直接支持select，用于处理异步IO问题。可以看出，ch初始化后，case1读取失败，timeout同样失败，因为ch

tydldd 2020-07-30

Mysql入门 DML语句大全DML、DDL、DCL

Mysql 数据库语句 1、说明：创建数据库CREATE DATABASE database-name2、说明：删除数据库drop database dbname3、说明：备份sql server--- 创建 备份数据的 deviceUSE masterE

好记忆也需烂 2020-07-28

fiddler相关命令的使用

bps 后边跟的是 HTTP 状态码，表示中断所有为该状态码的会话。将所有的会话打包成 .zip 压缩包的形式保存到 C 盘根目录下。比如 urlreplace baidu fishc 表示将所有 URL 的 baidu 替换成 fishc。select

jianghero 2020-07-28

Selenium 获取Select元素的选中值

obj_select = Select #强制类型转换为Select类型

Reiki 2020-07-28
seoppt

seoppt

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号