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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
纯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
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP微信分享开发详解
2017/01/14 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
安装Python的教程-Windows
2017/07/22 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python map比for循环快在哪
2020/09/21 Python
五种Python转义表示法
2020/11/27 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
学校四群教育实施方案
2014/06/12 职场文书
不错的求职信范文
2014/07/20 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
旷课检讨书500字
2014/10/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
硕士学位论文评语
2014/12/31 职场文书
保安辞职信范文
2015/02/28 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书