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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
JS跨域问题详解
Nov 25 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
js实现上传图片预览方法
Oct 25 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
Vue仿Bibibili首页的问题
Jan 21 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 daddslashes 使用方法介绍
2012/10/26 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python创建系统目录的方法
2015/03/11 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
python将字符串转换成json的方法小结
2019/07/09 Python
如何使用python代码操作git代码
2020/02/29 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
优秀教师获奖感言
2014/01/31 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
公司2014年度工作总结
2014/12/10 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
社区国庆节活动总结
2015/03/23 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers