Asp. NET Server-side control radiobuttonlist,dropdownlist,checkboxlist Value, Assignment usage _ Practical Tips

Source: Internet
Author: User

Each of the three controls has a collection of items that you can use to control the rendering of the list using the RepeatLayout and RepeatDirection properties. If the value of repeatlayout is table, the list is rendered in the table. If set to flow, the list is rendered without any table structure. By default, the value of RepeatDirection is Vertical. Setting this property to horizontal will render the list horizontally.

RadioButtonList: Control provides a single select list of selected options (data source radio). Similar to other list controls, RadioButtonList has a items collection whose members correspond to each item in the list.

DropDownList: Drop-down list selection, for some forms of input, the user must select an option from the list of applicable options (Drop-down only selection).

CheckBoxList: A multiple-selection list that renders a data source horizontally or vertically to the user, and allows the user to select multiple item options.

Since these three controls are server-side controls that need to be resolved at the client end, there are three server-side, client examples of the following controls

Server-side

Copy Code code as follows:

<asp:radiobuttonlist id= "RadioButtonList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > Single selection </asp:ListItem>
<asp:listitem value= "1" > single select two </asp:ListItem>
<asp:listitem value= "2" > single select three </asp:ListItem>
</asp:RadioButtonList>
<br/>
<asp:checkboxlist id= "CheckBoxList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > Optional one </asp:ListItem>
<asp:listitem value= "1" > Multi-selection two </asp:ListItem>
<asp:listitem value= "2" > Multi-selection three </asp:ListItem>
</asp:CheckBoxList>
<br/>
<asp:dropdownlist id= "DropDownList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > dropdown select one </asp:ListItem>
<asp:listitem value= "1" > Dropdown option two </asp:ListItem>
<asp:listitem value= "2" > dropdown select three </asp:ListItem>
</asp:DropDownList>

After browser parsing

Copy Code code as follows:

<span id= "RadioButtonList1" >
<input id= "RADIOBUTTONLIST1_0" type= "Radio" name= "RadioButtonList1" value= "0"/><label for= " Radiobuttonlist1_0 "> single Select one </label>
<input id= "Radiobuttonlist1_1" type= "Radio" name= "RadioButtonList1" value= "1"/><label for= " Radiobuttonlist1_1 "> Single selection Two </label>
<input id= "Radiobuttonlist1_2" type= "Radio" name= "RadioButtonList1" value= "2"/><label for= " Radiobuttonlist1_2 "> Single selection three </label>
</span>
<br/>
<span id= "CheckBoxList1" >
<input id= "checkboxlist1_0" type= "checkbox" Name= "checkboxlist1$0" value= "0"/><label for= "CheckBoxList1_0" > One More Choice </label>
<input id= "checkboxlist1_1" type= "checkbox" Name= "checkboxlist1$1" value= "1"/><label for= "CheckBoxList1_1" > Optional Two </label>
<input id= "checkboxlist1_2" type= "checkbox" Name= "Checkboxlist1$2" value= "2"/><label for= "CheckBoxList1_2" > Optional Three </label>
</span>
<br/>
<select name= "DropDownList1" id= "DropDownList1" repeatdirection= "horizontal" repeatlayout= "Flow" >
<option value= "0" > dropdown select one </option>
<option value= "1" > Dropdown option two </option>
<option value= "2" > dropdown select three </option>
</select>

The operation of these three controls is nothing more than a value and an assignment, and the following is done through jquery and. CS Two ways

jquery operates on three types of controls

1, RadioButtonList

1) Take the value

Copy Code code as follows:

$ ("#RadioButtonList1"). Change (function () {
The Val value of the selected item pops up
Alert ($ ("Input[name= ' RadioButtonList1 ']:checked"). Val ());
Popup text value for selected item
Alert ($ ("Input[name= ' RadioButtonList1 ']:checked+label"). Text ())
});

2) Assigning value

Copy Code code as follows:

The second item is selected by default
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) Take the value

Copy Code code as follows:

$ ("#DropDownList1"). Change (function () {
The Val value of the selected item pops up
Alert ($ ("#DropDownList1"). Val ());
Popup text value for selected item
Alert ($ ("#DropDownList1 option:selected"). Text ());
});

2) Assigning value

Copy Code code as follows:

The second item is selected by default
var DDLs = $ ("#DropDownList1 option");
for (var i = 0; i < ddl.length; i++) {
if (Ddl[i].value = = "1") {
ddl[i].selected = "true";
}
}

3, CheckBoxList

1) Take the value

Copy Code code as follows:

$ ("#CheckBoxList1 > Input"). Click (function () {
var arrval = [];
var val = "";
$ ("#CheckBoxList1: checkbox:checked"). each (function () {
Put the value of the selected item into the array arrval
Arrval.push ($ (this). Val ())
})
Connect the Val value in the array with ', '
val = Arrval.join (', ');
pops up all selected items to connect
Alert (val);
var arrtext = [];
var text = "";
$ ("#CheckBoxList1: checkbox:checked"). each (function () {
Put the text value of the selected item into the Arrtext array
Arrtext.push ($ (this). Next (). html ());
Use the data in the array to connect
Text = Arrtext.join (",");
})
Popup text value for selected item
alert (text);
});

2) Assigning value

Copy Code code as follows:

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";
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.