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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
twig里使用js变量的方法
2016/02/05 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python如何读取MySQL数据库表数据
2017/03/11 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
中职应届生会计求职信
2013/10/23 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
新学期教师寄语
2014/04/02 职场文书
物流专业自荐信
2014/05/23 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书