According to my consistent web development style, all events that do not directly operate the database are implemented by javascript as much as possible. Therefore, I plan to use js to accomplish this requirement.
First, let's analyze the specific situation: This page is an Update page. The brand has two fields: Brand 1 and brand 2. Brand 2 can be blank and brand 1 cannot be blank, therefore, the drop-down list box of brand 2 has more items than brand 1. If you select any of the first eight phases of the brand, the "active state" should be hidden, otherwise, the "active status" is displayed as "potential" by default. When the query result shows that brand 1 and brand 2 have any of the first eight phases of the brand, the "active status" should also be hidden, otherwise, the "active status" is displayed as "potential" by default ".
Page Content
Copy codeThe Code is as follows:
<Div id = "div_Brand_Baby" name = "div_Brand_Baby" style = "display: none" runat = "server">
<Div style = "float: left;"> brand 1: </div>
<Div style = "position: relative; float: left;">
<Span style = "margin-left: 170px; width: 18px; overflow: hidden;">
<Atlas: UpdatePanel ID = "UpdatePanel12" runat = "server">
<ContentTemplate>
<Asp: DropDownList ID = "ddlistFirstConsumeBrand" onchange = "ChangeBrand (this)" runat = "server"
DataTextField = "OptionText" DataValueField = "optionValue" performanceid = "objectperformance11"
Style = "width: 188px; margin-left:-170px">
</Asp: DropDownList>
</ContentTemplate>
</Atlas: UpdatePanel>
</Span>
<Asp: TextBox ID = "txtBrand1" runat = "server" onblur = "changebrand1 (this)" Style = "width: 170px;
Position: absolute; left: 0px; "> </asp: TextBox>
</Div>
<Div style = "float: left;">
Brand 2: </div>
<Div style = "position: relative; float: left;">
<Span style = "margin-left: 170px; width: 18px; overflow: hidden;">
<Atlas: UpdatePanel ID = "UpdatePanel13" runat = "server">
<ContentTemplate>
<Asp: DropDownList ID = "ddlistSecondConsumeBrand" runat = "server" onchange = "ChangeBrand (this )"
DataTextField = "OptionText" DataValueField = "optionValue" performanceid = "objectperformance12"
Style = "width: 188px; margin-left:-170px">
</Asp: DropDownList>
</ContentTemplate>
</Atlas: UpdatePanel>
</Span>
<Asp: TextBox ID = "txtbrand2" runat = "server" onblur = "changebrand1 (this)" Style = "width: 170px;
Position: absolute; left: 0px; "> </asp: TextBox>
</Div>
<Asp: ObjectDataSource ID = "objectperformance11" runat = "server" SelectMethod = "RetrieveMilkBrand_Baby"
TypeName = "CRR. BusinessRules. OptionManager">
<SelectParameters>
<Asp: Parameter DefaultValue = "1" Name = "languageID" Type = "Int32"/>
<Asp: Parameter DefaultValue = "false" Name = "addNull" Type = "Boolean"/>
</SelectParameters>
</Asp: ObjectDataSource>
<Asp: ObjectDataSource ID = "objectperformance12" runat = "server" SelectMethod = "RetrieveMilkBrand_Baby"
TypeName = "CRR. BusinessRules. OptionManager">
<SelectParameters>
<Asp: Parameter DefaultValue = "1" Name = "languageID" Type = "Int32"/>
<Asp: Parameter DefaultValue = "true" Name = "addNull" Type = "Boolean"/>
<Asp: Parameter DefaultValue = "" Name = "nullString" Type = "String"/>
</SelectParameters>
</Asp: ObjectDataSource>
</Div>
Javascript code
Copy codeThe Code is as follows:
Function changebrand1 (oTextbox)
{
Var brandTag = document. getElementById ("ddlistSecondConsumeBrand ");
Var brand1 = document. getElementById ("txtbrand1 ");
Var brand2 = document. getElementById ("txtbrand2 ");
Var brandcolls = brandTag. options;
Var textvalue = oTextbox. value;
Var flag = 0;
If (textvalue. length = 0)
{
Flag = 1;
}
Else if (textvalue. length> 0)
{
For (var I = 0; I <brandcolls. length; I ++)
{
If (oTextbox = brand1 & brandcolls [I]. text = textvalue)
{
Document. getElementById ("ddlistFirstConsumeBrand"). options. selectedIndex = I-1;
Flag = 1;
ChangeBrand (document. getElementById ("ddlistFirstConsumeBrand "));
}
Else if (oTextbox = brand2 & brandcolls [I]. text = textvalue)
{
BrandTag. selectedIndex = I;
Flag = 1;
ChangeBrand (brandTag );
}
}
If (flag = 0)
{
Alert ("Incorrect brand input! ");
OTextbox. value = "";
OTextbox. focus ();
}
}
}
Function ChangeBrand (me ){
Var brand1ID = document. all. ddlistFirstConsumeBrand. value;
Var brand2ID = document. all. ddlistSecondConsumeBrand. value;
Var brandvalue1 = document. getElementById ("txtbrand1 ");
Var brandvalue2 = document. getElementById ("txtbrand2 ");
If (brand1ID = "10") & (brand2ID = "-1 "))
{
Document. all. ddlistMilkPeriod. value = 9;
}
For (var I = 0; I <document. getElementById ("ddlistSecondConsumeBrand"). options. length; I ++)
{
If (document. getElementById ("ddlistFirstConsumeBrand") = me & document. all. ddlistFirstConsumeBrand. selectedIndex = I)
{
Brandvalue1.value = document. getElementById ("ddlistFirstConsumeBrand"). options [I]. text;
}
If (document. getElementById ("ddlistSecondConsumeBrand") = me & document. all. ddlistSecondConsumeBrand. selectedIndex = I)
{
Brandvalue2.value = document. getElementById ("ddlistSecondConsumeBrand"). options [I]. text;
}
If (I <8 & document. getElementById ("ddlistFirstConsumeBrand") = me & document. all. ddlistFirstConsumeBrand. selectedIndex = I)
{
Document. all. dv1.style. display = "block ";
Document. all. dv2.style. display = "none ";
Document. all. dv3.style. display = "none ";
Document. getElementById ("ddlistPotential"). options [0]. selected = "selected ";
Break;
}
Else if (I> 0 & I <9 & document. getElementById ("ddlistSecondConsumeBrand") = me & document. all. ddlistSecondConsumeBrand. selectedIndex = I)
{
Document. all. dv1.style. display = "block ";
Document. all. dv2.style. display = "none ";
Document. all. dv3.style. display = "none ";
Document. getElementById ("ddlistPotential"). options [0]. selected = "selected ";
Break;
}
Else if (I> 8)
{
Document. all. dv1.style. display = "none ";
Document. all. dv2.style. display = "block ";
Document. all. dv3.style. display = "block ";
Document. getElementById ("ddlistPotential"). options [1]. selected = "selected ";
}
}
}