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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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
根德YB400的电路分析
2021/03/02 无线电
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
小学生元旦广播稿
2014/02/21 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
销售总经理岗位职责
2014/03/15 职场文书
明信片寄语大全
2014/04/08 职场文书
财务管理专业求职信
2014/06/11 职场文书
锦旗标语大全
2014/06/23 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS