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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
js键盘事件实现人物的行走
Jan 17 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
中国第一家无线电行
2021/03/01 无线电
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
银行求职信怎么写
2014/05/26 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2014年司法局工作总结
2014/12/11 职场文书
生产现场禁烟通知
2015/04/23 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
处理canvas绘制图片模糊问题
2022/05/11 Javascript