jquery select下拉框操作的一些说明

阿烽伟业汽贸

阿烽伟业汽贸

2016-02-19 13:32

下面图老师小编跟大家分享一个简单易学的jquery select下拉框操作的一些说明教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
//==========测试代码===============
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 runat="server"
select name="ddlProvince"
option value="0"请选择/option
option value="1"北京/option
option value="60"重庆/option
option value="101"广东/option
/select
select name="ddlCity"
option value="0"请选择/option
/select
!-- option value="0"请选择/option 将ddlCity中的全部option清除--
asp:Button 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宽度,需要手动调整.
展开更多 50%)
分享

猜你喜欢

jquery select下拉框操作的一些说明

Web开发
jquery select下拉框操作的一些说明

可输入的下拉框

Web开发
可输入的下拉框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

动态提示的下拉框

Web开发
动态提示的下拉框

JavaScript 图标美化的下拉框

Web开发
JavaScript 图标美化的下拉框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

怎样添加一个下拉框到msflexgrid

编程语言 网络编程
怎样添加一个下拉框到msflexgrid

Jquery 表单取值赋值的一些基本操作

Web开发
Jquery 表单取值赋值的一些基本操作

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

关于OMA错误:Access....denied的解决方法

关于OMA错误:Access....denied的解决方法

Ubuntu如何安装配置JRE

Ubuntu如何安装配置JRE
下拉加载更多内容 ↓