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 强制设为首页的代码
Jan 31 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
纯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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
劳资专员岗位职责
2013/12/27 职场文书
赔偿协议书范本
2014/04/15 职场文书
教研活动总结
2014/04/28 职场文书
2015年环境整治工作总结
2015/05/22 职场文书