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经典效果集锦
Jul 06 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
功能强大的php文件上传类
2016/08/29 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
js验证表单第二部分
2006/11/25 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
打包发布Python模块的方法详解
2016/09/18 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python如何删除列为空的行
2020/07/17 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
小学端午节活动方案
2014/03/13 职场文书
技校毕业生自荐书
2014/05/23 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
个人总结与自我评价
2015/02/14 职场文书
暂停营业通知
2015/04/25 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
黄河绝恋观后感
2015/06/08 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技