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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
js+html获取系统当前时间
Nov 10 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
浅析JS运动
2015/12/28 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
js实现简单点赞操作
2020/03/17 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
python的mysqldb安装步骤详解
2017/08/14 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
培训通知
2015/04/17 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书