如圖1所示,從留學國家中選中需要的留學國家,選中顧問觸發事件,獲取選中的留學國家,如果留學國家爲空,提示留學國家不爲空
圖1
前臺頁面代碼如下
InputStudy.aspx
<div class="row" id="panelAbroad1" runat="server">
<div class="span12">
<div class="input-group">
<span class="input-group-addon ie_widthauto">留學國家:<font color="red">*</font></span>
<asp:CheckBoxList ID="ckkHopeCountryList" CssClass="checkbox-inline form-control ie_widthauto checkboxlist " runat="server" RepeatDirection="Horizontal" RepeatColumns="12">
</asp:CheckBoxList>
</div>
</div>
</div>
<div class="row" id="panelACouslt1" runat="server">
<div class="span5">
<div class="input-group">
<span class="input-group-addon ie_widthauto">顧問:<font color="red">*</font></span>
<select id="dllRecordDepList" name="dllRecordDepList" class="form-control ie_widthauto" runat="server">
<option value="-1">無諮詢員</option>
</select>
<input type="hidden" id="hidRecDep" runat="server" />
<input type="hidden" id="hidAConsultant" runat="server" />
<span class="input-group-addon ie_widthauto">-></span>
<select name="selAConsultant" id="selAConsultant" class="form-control ie_widthauto" runat="server">
<option value="-1">--請選擇-- </option>
</select>
</div>
</div>
</div>
後臺綁定checkboxlist數據,用的ORM
inputStudy.aspx.cs
/// <summary>
/// 留學國家
/// </summary>
private IList GetHopeCountryList(int GroupID)
{
IList RecepList = new ArrayList();
IDataReader rdr;
if (GroupID == 0)
{
rdr = DB.Context.FromSql("select CountryID,Country from tblRecepCountry where Flag=0").ToDataReader();
}
else
{
rdr = DB.Context.FromSql("select CountryID,Country from tblRecepCountry where Flag=0 and GroupID=@GroupID").AddInParameter("@GroupID", DbType.Int32, GroupID).ToDataReader();
}
while (rdr.Read())
{
Model.tblRecepCountry cyInfo = new Model.tblRecepCountry();
cyInfo.CountryID = int.Parse(rdr["CountryID"].ToString());
cyInfo.Country = rdr["Country"].ToString();
RecepList.Add(cyInfo);
}
return RecepList;
}
jQuery代碼
ConsultantType02.js
$(document).ready(function () {
$("#dllRecordDepList").change(function () {
var id = $(this).val();
var country = "";
$("input[name^='ckkHopeCountryList']").each(function () {
if (this.checked) {
country = country + $(this).next().text() + "*";
}
});
if (country == "" || country == undefined) {
alert("留學國家不能爲空")
} else {
$.ajax({
type: "POST",
url: "../Handler/ConsultantType02.ashx",
data: { type: "AConsultant", id: id, country: country },
success: function (data) {
if (data == "fail") {
alert("loading failed");
}
else {
addAConsultantList(data);
}
}
});
}
});
});
關鍵代碼爲
var country = "";
$("input[name^='ckkHopeCountryList']").each(function () {
if (this.checked) {
country = country + $(this).next().text() + "*";
}
});
通過F12觀察checkboxlist生成的是一個table對應的name是ckkHopeCountryList
如果想了解ajax級聯的寫法可以點擊下面的連接
http://blog.csdn.net/sunping177/article/details/51162820