DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery select下拉框操作的一些說明
jquery select下拉框操作的一些說明
編輯:JQuery特效代碼     
代碼如下:
//==========測試代碼===============
<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寬度,需要手動調整.
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved