欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法

程序员文章站 2024-02-27 21:58:57
这三个控件都有一个items集合,可以用 repeatlayout 和 repeatdirection 属性来控制列表的呈现形式。如果 repeatlayout 的值为 t...

这三个控件都有一个items集合,可以用 repeatlayout 和 repeatdirection 属性来控制列表的呈现形式。如果 repeatlayout 的值为 table,那么将在表中呈现列表。如果设置成 flow,那么将在没有任何表结构的情况下呈现列表。默认情况下,repeatdirection 的值为 vertical。将此属性设置成 horizontal 将会使列表水平呈现。

radiobuttonlist:控件提供已选中一个选项的单项选择列表(数据源单选)。与其他列表控件相似,radiobuttonlist 有一个 items 集合,其成员与列表中的每个项目相对应。

dropdownlist:下拉列表选择,对于有些形式的输入,用户必须从适用选项列表中选择一个选项(下拉唯一选择)。

checkboxlist:多选列表,将数据源以横向或纵向方式呈现给用户,用户可以进行多个item的选择。

由于这三个控件是服务器端控件,需要在客户端进行解析,下面有三个控件的服务器端、客户端例子

服务器端

复制代码 代码如下:

<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>

经过浏览器解析后

复制代码 代码如下:

<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)取值

复制代码 代码如下:

 $("#radiobuttonlist1").change(function () {
   //弹出选中项的val值
                alert($("input[name='radiobuttonlist1']:checked").val());
  //弹出选中项的text值
                alert($("input[name='radiobuttonlist1']:checked+label").text())
  }); 

   2)赋值

复制代码 代码如下:

//默认选中第二项
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)取值

复制代码 代码如下:

 $("#dropdownlist1").change(function () {
//弹出选中项的val值
                alert($("#dropdownlist1").val());
//弹出选中项的text值
                alert($("#dropdownlist1 option:selected").text());
            });

    2)赋值

复制代码 代码如下:

//默认选中第二项
var ddls = $("#dropdownlist1 option");
                        for (var i = 0; i < ddl.length; i++) {
                            if (ddl[i].value == "1") {
                                ddl[i].selected = "true";
                            }
                        }

3、checkboxlist

     1)取值 

复制代码 代码如下:

$("#checkboxlist1 > input").click(function () {
               var arrval = [];
                var val = "";
              $("#checkboxlist1 :checkbox:checked").each(function () {
             //将选中项的值放进数组arrval
                    arrval.push($(this).val())
                })
            //将数组中的val值以‘,'进行连接
                val = arrval.join(',');
              //弹出所有选择的项以,连接
                                alert(val);
                var arrtext = [];
                var text = "";
                $("#checkboxlist1 :checkbox:checked").each(function () {
              //将选中项的text值放进arrtext数组中
                    arrtext.push($(this).next().html());
              //将数组中的数据用,进行连接
                    text = arrtext.join(",");
                })
             //弹出选中项的text值
               alert(text);
                });

2)赋值

复制代码 代码如下:

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