這三個控件都有一個Items集合，可以用 RepeatLayout 和 RepeatDirection 屬性來控制列表的呈現(xiàn)形式。如果 RepeatLayout 的值為 Table，那么將在表中呈現(xiàn)列表。如果設(shè)置成 Flow，那么將在沒有任何表結(jié)構(gòu)的情況下呈現(xiàn)列表。默認情況下，RepeatDirection 的值為 Vertical。將此屬性設(shè)置成 Horizontal 將會使列表水平呈現(xiàn)。
RadioButtonList：控件提供已選中一個選項的單項選擇列表（數(shù)據(jù)源單選）。與其他列表控件相似，RadioButtonList 有一個 Items 集合，其成員與列表中的每個項目相對應(yīng)。
DropDownList：下拉列表選擇，對于有些形式的輸入，用戶必須從適用選項列表中選擇一個選項（下拉唯一選擇）。
CheckBoxList：多選列表，將數(shù)據(jù)源以橫向或縱向方式呈現(xiàn)給用戶，用戶可以進行多個item的選擇。
由于這三個控件是服務(wù)器端控件，需要在客戶端進行解析，下面有三個控件的服務(wù)器端、客戶端例子
服務(wù)器端
復(fù)制代碼 代碼如下:
asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
asp:ListItem Value="0">單選一/asp:ListItem>
asp:ListItem Value="1">單選二/asp:ListItem>
asp:ListItem Value="2">單選三/asp:ListItem>
/asp:RadioButtonList>
br />
asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
asp:ListItem Value="0">多選一/asp:ListItem>
asp:ListItem Value="1">多選二/asp:ListItem>
asp:ListItem Value="2">多選三/asp:ListItem>
/asp:CheckBoxList>
br />
asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
asp:ListItem Value="0">下拉選擇一/asp:ListItem>
asp:ListItem Value="1">下拉選擇二/asp:ListItem>
asp:ListItem Value="2">下拉選擇三/asp:ListItem>
/asp:DropDownList>
經(jīng)過瀏覽器解析后
復(fù)制代碼 代碼如下:
span id="RadioButtonList1">
input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" />label for="RadioButtonList1_0">單選一/label>
input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" />label for="RadioButtonList1_1">單選二/label>
input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" />label for="RadioButtonList1_2">單選三/label>
/span>
br />
span id="CheckBoxList1">
input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" />label for="CheckBoxList1_0">多選一/label>
input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" />label for="CheckBoxList1_1">多選二/label>
input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" />label for="CheckBoxList1_2">多選三/label>
/span>
br />
select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
option value="0">下拉選擇一/option>
option value="1">下拉選擇二/option>
option value="2">下拉選擇三/option>
/select>
對于這三個控件的操作無非就是取值和賦值，下面通過Jquery和.cs兩種方式進行操作
Jquery對三種控件進行操作
1、RadioButtonList
1）取值
復(fù)制代碼 代碼如下:
$("#RadioButtonList1").change(function () {
//彈出選中項的val值
alert($("input[name='RadioButtonList1']:checked").val());
//彈出選中項的text值
alert($("input[name='RadioButtonList1']:checked+label").text())
});
2）賦值
復(fù)制代碼 代碼如下:
//默認選中第二項
var rbts = document.getElementsByName("RadioButtonList1");
for (var i = 0; i rbts.length; i++) {
if (rbts[i].value == "1")
rbts[i].checked = "true";
}
2、DropDownList
1）取值
復(fù)制代碼 代碼如下:
$("#DropDownList1").change(function () {
//彈出選中項的Val值
alert($("#DropDownList1").val());
//彈出選中項的text值
alert($("#DropDownList1 option:selected").text());
});
2）賦值
復(fù)制代碼 代碼如下:
//默認選中第二項
var ddls = $("#DropDownList1 option");
for (var i = 0; i ddl.length; i++) {
if (ddl[i].value == "1") {
ddl[i].selected = "true";
}
}
3、CheckBoxList
1）取值
復(fù)制代碼 代碼如下:
$("#CheckBoxList1 > input").click(function () {
var arrval = [];
var val = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
//將選中項的值放進數(shù)組arrval
arrval.push($(this).val())
})
//將數(shù)組中的val值以‘,'進行連接
val = arrval.join(',');
//彈出所有選擇的項以,連接
alert(val);
var arrtext = [];
var text = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
//將選中項的text值放進arrtext數(shù)組中
arrtext.push($(this).next().html());
//將數(shù)組中的數(shù)據(jù)用,進行連接
text = arrtext.join(",");
})
//彈出選中項的Text值
alert(text);
});
2）賦值
復(fù)制代碼 代碼如下:
var cbks = $("#CheckBoxList1 input[type='checkbox']");
for (var i = 0; i cbks.length; i++) {
if (cbks[i].value== "1"||cbks[i].value=="2") {
cbks[i].checked = "true";
}
}
您可能感興趣的文章:- ASP.NET自定義Web服務(wù)器控件之Button控件
- asp.net Page.EnableEventValidation 屬性驗證服務(wù)器控件的回發(fā)和回調(diào)事件出現(xiàn)的錯誤
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標簽后的value和text值
- asp.net 服務(wù)器控件的 ID,ClientID,UniqueID 的區(qū)別
- asp.net下使用Request.From獲取非服務(wù)器控件的值的方法
- jQuery生成asp.net服務(wù)器控件的代碼
- ASP.NET 動態(tài)寫入服務(wù)器端控件
- asp.net Page.Controls對象(找到所有服務(wù)器控件)
- Asp.Net使用服務(wù)器控件Image/ImageButton顯示本地圖片的方法
