EasyTools 元件庫提供的聯動下拉選單控制項，支援兩級選單（大分類→小分類）資料綁定與客戶端互動，適合省市、年級班級等層級資料場景。
| 屬性 | 型別 | 說明 |
|---|---|---|
| Big_Label | string | 一級選單標籤文字（支援 HTML），如「省份」、「年級」 |
| Small_Label | string | 二級選單標籤文字（支援 HTML），如「城市」、「班級」 |
| BigData | List<BigItem> | 一級選單資料來源，BigItem 包含 Value、Text 屬性 |
| SmallData | List<SmallItem> | 二級選單資料來源，SmallItem 包含 BigValue(關聯一級值)、Value、Text |
| BigValue | string | 一級選單目前選中值 |
| SmallValue | string | 二級選單目前選中值 |
public class BigItem {
public string Value { get; set; } // 如 "1" 代表省份代碼
public string Text { get; set; } // 如 "浙江省"
}
public class SmallItem {
public string BigValue { get; set; } // 關聯的 BigItem.Value
public string Value { get; set; } // 如 "101" 代表城市代碼
public string Text { get; set; } // 如 "杭州市"
}
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
// 模擬省市資料
var provinces = new List {
new BigItem { Value = "1", Text = "浙江省" },
new BigItem { Value = "2", Text = "江蘇省" }
};
var cities = new List {
new SmallItem { BigValue = "1", Value = "101", Text = "杭州市" },
new SmallItem { BigValue = "1", Value = "102", Text = "寧波市" },
new SmallItem { BigValue = "2", Value = "201", Text = "南京市" },
new SmallItem { BigValue = "2", Value = "202", Text = "蘇州市" }
};
CascadingDropDown1.Big_Label = "省份";
CascadingDropDown1.Small_Label = "城市";
CascadingDropDown1.BigData = provinces;
CascadingDropDown1.SmallData = cities;
// 預設選中
CascadingDropDown1.BigValue = "1";
CascadingDropDown1.SmallValue = "101";
}
}
// 一級選單變更時觸發
protected void CascadingDropDown1_BigSelectedIndexChanged(object sender, EventArgs e) {
string selectedProvince = CascadingDropDown1.BigValue;
// 可在此進行伺服端邏輯：載入該省份下的其他資料、更新 GridView 等
LoadDataByProvince(selectedProvince);
}
// 二級選單變更時觸發
protected void CascadingDropDown1_SmallSelectedIndexChanged(object sender, EventArgs e) {
string selectedCity = CascadingDropDown1.SmallValue;
LoadDataByCity(selectedCity);
}
<script>
// 取得控制項 ClientID
var bigDDL = document.getElementById('<%= CascadingDropDown1.FindControl("BigDropDown").ClientID %>');
var smallDDL = document.getElementById('<%= CascadingDropDown1.FindControl("SmallDropDown").ClientID %>');
// 手動觸發二級選單更新（如從其他控制項聯動）
function updateCities(provinceValue) {
bigDDL.value = provinceValue;
// 觸發控制項內建的 change 事件
if (bigDDL.onchange) bigDDL.onchange();
}
</script>
| 問題 | 解決 |
|---|---|
| 二級選單不更新 | 確認 SmallData 中 BigValue 與 BigItem.Value 完全一致（含型別） |
| PostBack 後選中值消失 | 在 Page_Load 非 PostBack 區塊綁定資料，選中值在 ViewState 自動保持 |
| 需支援三級聯動 | EasyTools 僅支援兩級，需自行擴充或使用 jQuery Cascading DropDown Plugin |
| 資料量大效能問題 | 改用 AJAX 回呼動態載入二級資料，避免一次性輸出所有 SmallItem |
<select id="province"></select>
<select id="city" disabled></select>
<script>
var data = {
"1": [{"v":"101","t":"杭州"},{"v":"102","t":"寧波"}],
"2": [{"v":"201","t":"南京"},{"v":"202","t":"蘇州"}]
};
$("#province").change(function() {
var val = $(this).val();
var $city = $("#city").empty().prop("disabled", !val);
if (val) $.each(data[val], function() {
$city.append($("<option>").val(this.v).text(this.t));
});
});
</script>
