问题场景:
有两个下拉框ddlPriceType与ddlMonth。代码分别如下:
<asp:DropDownList ID="ddlPriceType" runat="server" onchange="SetMonthByType();">
<asp:ListItem Value="0">年度计划价</asp:ListItem>
<asp:ListItem Value="1">月度现行价</asp:ListItem>
</asp:DropDownList>
<asp:ListItem Value="0">年度计划价</asp:ListItem>
<asp:ListItem Value="1">月度现行价</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlMonth" runat="server">
<asp:ListItem Value="00">全部</asp:ListItem>
<asp:ListItem Value="01">一月</asp:ListItem>
<asp:ListItem Value="02">二月</asp:ListItem>
<asp:ListItem Value="03">三月</asp:ListItem>
<asp:ListItem Value="04">四月</asp:ListItem>
<asp:ListItem Value="05">五月</asp:ListItem>
<asp:ListItem Value="06">六月</asp:ListItem>
<asp:ListItem Value="07">七月</asp:ListItem>
<asp:ListItem Value="08">八月</asp:ListItem>
<asp:ListItem Value="09">九月</asp:ListItem>
<asp:ListItem Value="10">十月</asp:ListItem>
<asp:ListItem Value="11">十一月</asp:ListItem>
<asp:ListItem Value="12">十二月</asp:ListItem>
</asp:DropDownList>
<asp:ListItem Value="00">全部</asp:ListItem>
<asp:ListItem Value="01">一月</asp:ListItem>
<asp:ListItem Value="02">二月</asp:ListItem>
<asp:ListItem Value="03">三月</asp:ListItem>
<asp:ListItem Value="04">四月</asp:ListItem>
<asp:ListItem Value="05">五月</asp:ListItem>
<asp:ListItem Value="06">六月</asp:ListItem>
<asp:ListItem Value="07">七月</asp:ListItem>
<asp:ListItem Value="08">八月</asp:ListItem>
<asp:ListItem Value="09">九月</asp:ListItem>
<asp:ListItem Value="10">十月</asp:ListItem>
<asp:ListItem Value="11">十一月</asp:ListItem>
<asp:ListItem Value="12">十二月</asp:ListItem>
</asp:DropDownList>
现在想实现的功能是:若ddlPriceType选中第一项,则只能选中ddlMonth下拉框中“全部”,否则可以选中ddlMonth下拉框中除“全部”以外选项。
经过实践与思考,功能最终得以实现。代码如下:
<script type="text/javascript">
function SetMonthByType() {
var control = $get("<%= ddlPriceType.ClientID %>");
var selectedValue = control.options[control.selectedIndex].value;
var month = $get("<%=ddlMonth.ClientID %>");
if (selectedValue == "0")
{
if (month.options[0].value != "00")
{
var opt = document.createElement("option"); opt.innerHTML = "全部";opt.value = "00";
month.insertBefore(opt, month.firstChild);
}
month.selectedIndex = 0;
month.disabled = true;
}
else
{
if (month.options[0].value == "00") { month.options.remove(0); }
month.disabled = false;
}
}
</script>
function SetMonthByType() {
var control = $get("<%= ddlPriceType.ClientID %>");
var selectedValue = control.options[control.selectedIndex].value;
var month = $get("<%=ddlMonth.ClientID %>");
if (selectedValue == "0")
{
if (month.options[0].value != "00")
{
var opt = document.createElement("option"); opt.innerHTML = "全部";opt.value = "00";
month.insertBefore(opt, month.firstChild);
}
month.selectedIndex = 0;
month.disabled = true;
}
else
{
if (month.options[0].value == "00") { month.options.remove(0); }
month.disabled = false;
}
}
</script>
注:页面中DropDownList中初始加载选项时,必须加载全部。然后利用javascript函数对选项进行动态控制。