手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery select下拉框操作的一些说明
jquery select下拉框操作的一些说明
摘要:复制代码代码如下://==========测试代码===============下拉框测试$(function(){var$city=$("...

复制代码 代码如下:

//==========测试代码===============

<head runat="server">

<title>下拉框测试</title>

<script type="text/javascript" src="http://www.jb51.netjs/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>

<>

<asp:Button ID="butSave" runat="server" 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宽度,需要手动调整.

【jquery select下拉框操作的一些说明】相关文章:

javascript相关事件的几个概念

javascript实现带下拉子菜单的导航菜单效果

jQuery切换所有复选框选中状态的方法

jquery中添加属性和删除属性

jquery实现点击label的同时触发文本框点击事件的方法

Jquery中基本选择器用法实例详解

prototype 的说明 js类

JQuery插件jcarousellite的参数中文说明

jquery合并表格中相同文本的相邻单元格

AngularJS中的一些常用指令介绍

精品推荐
分类导航