jquery select下拉框操作的一些说明


Posted in Javascript onApril 02, 2010
//==========测试代码=============== 
<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宽度,需要手动调整.

Javascript 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 #Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript 写类方式之四
2009/07/05 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
django输出html内容的实例
2018/05/27 Python
python读取与处理netcdf数据方式
2020/02/14 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
Java基础知识面试题
2014/03/25 面试题
物流专业求职计划书
2014/01/10 职场文书
建材投资建议书
2014/05/16 职场文书
关于爱国的标语
2014/06/24 职场文书
住房抵押登记委托书
2014/09/27 职场文书
委托函范文
2015/01/29 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
自荐信格式模板
2015/03/27 职场文书
倡议书的格式写法
2015/04/28 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
基于Python实现将列表数据生成折线图
2022/03/23 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技