.net服务器控件转换为html控件

1. DropDownList

  <asp:DropDownList runat="server" ID="ddlTest" >
     <asp:ListItem Value="Items" Text="Items11" ></asp:ListItem>
     <asp:ListItem Value="Items2" Text="Items12"></asp:ListItem>
     <asp:ListItem Value="Items3" Text="Items13" Selected="True" ></asp:ListItem>
     <asp:ListItem Value="Items33" Text="Items4" ></asp:ListItem>
     <asp:ListItem Value="Items4" Text="Items5" ></asp:ListItem>
   </asp:DropDownList>

转换成：

<select name="ddlTest" id="ddlTest">
<option value="Items">Items11</option>
<option value="Items2">Items12</option>
<option selected="elected" value="Items3">Items13</option>
<option value="Items33">Items4</option>
<option value="Items4">Items5</option>
</select>

用JS操作html:

    function OperaDDl()

  {

         var obj=document.getElementById("ddlTest");

          ///得到当前选中的值

          var currentSelectedValue=obj[obj.selectedIndex].value   或者  obj[obj.selectedIndex].innerText; 或者 obj.options.value 或者 obj.options[obj.selectedIndex].value/text

          //设置显示那个值

          obj.selectedIndex=integer;

         //增加项

           obj.options.add(new Option("Value","Text"));

         //删除项

          obj.options[i].remove();

}

2. RadioButtonList    

根据RepeatLayout转换成Table和Span. RepeatDirection的不同是在一行很是多行

 <asp:RadioButtonList runat="server" ID="rbiTest">
     <asp:ListItem Value="value1" Text="Text1"></asp:ListItem>
      <asp:ListItem Value="value1" Text="Text2"></asp:ListItem>
       <asp:ListItem Value="value1" Text="Text3"></asp:ListItem>
        <asp:ListItem Value="value1" Text="Text4"></asp:ListItem>
         <asp:ListItem Value="value1" Text="Text5"></asp:ListItem>
   </asp:RadioButtonList><br />

如果RepeatLayout没有或=“Table"

     <table id="rbiTest">
<tr>
<td><input id="rbiTest_0" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_0">Text1</label></td>
</tr><tr>
<td><input id="rbiTest_1" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_1">Text2</label></td>
</tr><tr>
<td><input id="rbiTest_2" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_2">Text3</label></td>
</tr><tr>
<td><input id="rbiTest_3" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_3">Text4</label></td>
</tr><tr>
<td><input id="rbiTest_4" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_4">Text5</label></td>
</tr>
</table>

如果RepeatLayout=“Flow"

 <span id="rbiTest"><input id="rbiTest_0" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_0">Text1</label><br /><input id="rbiTest_1" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_1">Text2</label><br /><input id="rbiTest_2" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_2">Text3</label><br /><input id="rbiTest_3" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_3">Text4</label><br /><input id="rbiTest_4" type="radio" name="rbiTest" value="value1" /><label for="rbiTest_4">Text5</label></span><br />

不管是转换成Table 还是Span我们发现一个重要特征，那就是被包含的子项都是type="radio"的input并且name都相同。

从而可以用js操作：

function rbiOpera()

{

      var items=document.getElmentsByName("rbiId");

     //循环得到选中的值

      for(var i=0;i<items.length;i++)

      {

           if(items[i].checked)

                  return items[i].value;

      }

}