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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
vue选项卡切换的实现案例
Apr 11 Vue.js
纯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
用header 发送cookie的php代码
2007/03/16 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
浅谈Vue.js
2017/03/02 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
python实用代码片段收集贴
2015/06/03 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
浅谈Python的文件类型
2016/05/30 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python 实现多维数组转向量
2019/11/30 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
财政局长自荐信范文
2013/12/22 职场文书
高三自我评价
2014/02/01 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
公司节能减排倡议书
2014/05/14 职场文书
应聘教师自荐书
2014/06/16 职场文书
女生节标语
2014/06/26 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript