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

2016-02-19 13:32 5 1 收藏

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

【 tulaoshi.com - Web开发 】

代码如下:

(本文来源于图老师网站,更多请访问http://www.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宽度,需要手动调整.

来源:http://www.tulaoshi.com/n/20160219/1604588.html

延伸阅读
标签: Web开发
即在触发地区下拉框的onchange事件时,代理商的下拉框选项也相应的改变,比如选择地区 湖南—〉长沙,那么代理商下拉框只显示长沙的代理商。 本来认为这个很好实现,但实际改起来的时候发现问题多多,主要问题是原有的地区联动是用js实现的,它的数据源是一个xml文件,当然如果下拉框是服务器端控件那么问题是很好解决的,现在是html控件一下...
标签: Web开发
作者: 何耀 Thursday, June 5 2003 2:44 PM   传统的HTML页面中连动下拉框采用了两种方法: 1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。    html ...
标签: Web开发
在一般的留言本,论坛等地方都要用到文本输入框,也就是html语言中的textarea,textare包含有众多的参数,学会运用这些参数,就可以随意修改文本输入框的大小和外观,达到你想要的效果,下面就来介绍这些参数,以及如何使用这些参数。  1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一...
标签: Web开发
HTML HEAD titleAjax实现无刷新三联动下拉框/title meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" meta content="C#" name="CODE_LANGUAGE" meta content="JavaScript" name="vs_defaultClientScript" meta content="http://schemas.microsoft.com/intellis...
  问题提出: 我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图示如下: 解决问题: 由于层与下拉框之间的优先级是:下拉框  层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中...

经验教程

775

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部