A little experience with JavaScript operations select Drop-down list box _ form effects

According to my consistent web development style, all events that do not directly manipulate the database are implemented by JavaScript as much as possible, so I'm going to use JS to do this.
First of all, to analyze the specific situation: This page is an update page, Brand 1 and brand 22 fields, brand 2 can be empty, brand 1 cannot be empty, so the brand 2 Drop-down list box than the brand more than 1; If you choose any of the first 8 phases of the brand, "active state" to hide, otherwise "active state" The default display status is "latent", when the results of the query brand 1 and brand 2 have any one in the first 8 phase of the brand, "active state" also want to hide, otherwise the "active state" default display status is "latent".
Page part Content

Copy Code code 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" datasourceid= "ObjectDataSource11"
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" datasourceid= "ObjectDataSource12"
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= "ObjectDataSource11" 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= "ObjectDataSource12" 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 Code code 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 ("Enter brand Error!") ");
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== "ten") && (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";
}
}
}