jquery select下拉框操作的一些说明
更新时间：2010年04月02日 22:20:49 作者：
公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题
复制代码 代码如下:
//==========测试代码===============
<head runat="server">
<title>下拉框测试</title>
<script type="text/javascript" src="/js/jquery/jquery-1.3.js"></script>
<script type="text/javascript">
$(function(){
var $city= $("#ddlCity");
//填充一些数据
for(var i=1;i<=10;i++){
$city.append($("<option/>").attr("value",i).text("可以选择的城市第:" +i));
}
//$city.width("100px");//IE6.0下需要自己调整下拉框的宽度
var t=6;
//setTimeout("$(\"#ddlCity\").val("+ t +");",1); //IE6下解决一,IE,火狐取值多有问题
try{$city.val(6);}catch(e){} //IE6下解决二,select至少有一个静态option,IE取值有问题
//$city.val(6);//ie6报错,fireFox,IE8.0正常
alert($city.val());
$("#ddlProvince").val(101);//全部正常
});
</script>
</head>
<body>
<form id="form1" runat="server">
<select id="ddlProvince" name="ddlProvince">
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="60">重庆</option>
<option value="101">广东</option>
</select>
<select id="ddlCity" name="ddlCity">
<option value="0">请选择</option>
</select>
<!-- <option value="0">请选择</option> 将ddlCity中的全部option清除-->
<asp:Button ID="butSave" runat="server" onclick="butSave_Click" Text="Button" />
</form>
</body>
//==========End 测试代码===================
测试说明:
A:静态select项目
静态select项目(可以通过服务器端脚本填充),可以直接使用$("#下拉框id").val(选中的value)进行设置.
设置后使用$("#下拉框id").val();可以正确获取其值.
B:有一项静态的
包含动态创建立的option时,使用$("#selectId").val()
动态创建的(包含一项静态的option如: <option value="0">请选择</option>),可以通过
1.setTimeout("$(\"#下拉框id\").val("+value+")",1)设置.
但是使用setTimeout后,使用$("#下拉框id").val();取值时则不正确,当然通常情况你的代码上下文保留有value值,
没必要通过.val()去取,setTimeout缺点是异步执行的,setTimeout执行时的上下文通常不是当前函数域.
2.使用try{$("#下拉框id").val();}catch(e){}来屏蔽错误,
这个在firefox中跟IE6.0中多可以正常运行,但是IE6.0取值会出问题.
C:全部动态创建
这种情况下使用try在IE6.0中也无发设置.
另外IE6.0对动态创建的下拉项目,不能自动调整select宽度,需要手动调整.
相关文章
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
jQuery EasyUI是一个旨在辅助HTML5打造更好的Web界面的框架,而其中的Datagrid组件也是非常强大,这里我们就来看一下jQuery EasyUI框架中的Datagrid数据表格组件结构详解2016-06-06
本文是对jquery.validate的使用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要给大家分享了jquery中关于bind()方法的使用技巧，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
jquery表单验证需要做些什么，大家知道吗？其实很简单只要做四件事情就可以顺利完成表单验证，想知道哪四件事情吗，请仔细阅读下文。2015-11-11
这篇文章主要介绍了jQuery中复合选择器简单用法,结合实例形式分析了jQuery中复合选择器的概念、功能、应用场景及相关使用方法,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了jQuery元素选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理，如何利用Ajax和Json技术让用户操作起来觉得更轻松，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要介绍了jQuery实现简单的列表式导航菜单效果代码,涉及jquery操作鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这是一款jquery hover抽屉式导航图片展开收缩切换特效代码，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。2015-08-08
本文主要介绍了jquery正整数数字校验正则表达式的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论