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