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源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
JS实现拖动示例代码
Nov 01 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
图解JS原型和原型链实现原理
Sep 15 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标准库(PHP SPL)详解
2019/03/16 PHP
5 cool javascript apps
2007/03/24 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
vue组件间通信解析
2017/03/01 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python面试题之列表声明实例分析
2019/07/08 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python属于哪种语言
2020/08/16 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
骨干教师培训感言
2014/01/16 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
施工安全责任书范本
2014/07/24 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL