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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
PHP7常量数组用法分析
2016/09/26 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python中常用的8种字符串操作方法
2019/05/06 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
什么是Python包的循环导入
2020/09/08 Python
小结Python的反射机制
2020/09/28 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
房地产销售计划书
2014/01/10 职场文书
英语课外活动总结
2014/08/27 职场文书
校园运动会广播稿
2014/10/06 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
看雷锋电影观后感
2015/06/10 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang