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