快捷導(dǎo)航

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

更新時(shí)間：2010年04月02日 22:20:49 作者：

公司網(wǎng)站目前的訪問用戶中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中設(shè)置下拉框時(shí)會(huì)有以下一些問題

 
//==========測試代碼=============== 
<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"); 
//填充一些數(shù)據(jù) 
for(var i=1;i<=10;i++){ 
$city.append($("<option/>").attr("value",i).text("可以選擇的城市第:" +i)); 
} 
//$city.width("100px");//IE6.0下需要自己調(diào)整下拉框的寬度 
var t=6; 
//setTimeout("$(\"#ddlCity\").val("+ t +");",1); //IE6下解決一,IE,火狐取值多有問題 
try{$city.val(6);}catch(e){} //IE6下解決二,select至少有一個(gè)靜態(tài)option,IE取值有問題 
//$city.val(6);//ie6報(bào)錯(cuò),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:靜態(tài)select項(xiàng)目
靜態(tài)select項(xiàng)目(可以通過服務(wù)器端腳本填充),可以直接使用$("#下拉框id").val(選中的value)進(jìn)行設(shè)置.
設(shè)置后使用$("#下拉框id").val();可以正確獲取其值.

B:有一項(xiàng)靜態(tài)的
包含動(dòng)態(tài)創(chuàng)建立的option時(shí),使用$("#selectId").val()
動(dòng)態(tài)創(chuàng)建的(包含一項(xiàng)靜態(tài)的option如: <option value="0">請選擇</option>),可以通過
1.setTimeout("$(\"#下拉框id\").val("+value+")",1)設(shè)置.
但是使用setTimeout后,使用$("#下拉框id").val();取值時(shí)則不正確,當(dāng)然通常情況你的代碼上下文保留有value值,
沒必要通過.val()去取,setTimeout缺點(diǎn)是異步執(zhí)行的,setTimeout執(zhí)行時(shí)的上下文通常不是當(dāng)前函數(shù)域.

2.使用try{$("#下拉框id").val();}catch(e){}來屏蔽錯(cuò)誤,
這個(gè)在firefox中跟IE6.0中多可以正常運(yùn)行,但是IE6.0取值會(huì)出問題.
C:全部動(dòng)態(tài)創(chuàng)建
這種情況下使用try在IE6.0中也無發(fā)設(shè)置.

另外IE6.0對(duì)動(dòng)態(tài)創(chuàng)建的下拉項(xiàng)目,不能自動(dòng)調(diào)整select寬度,需要手動(dòng)調(diào)整.

您可能感興趣的文章: