A little experience in the select drop-down list box for javascript operations _ form special effects

Today, the customer puts forward new requirements for the project, requiring that the product brand not only be selectable, but also be input, and the entered brand name must be in the drop-down list box (because there are too many product brands, it is difficult to choose from, so there is this requirement; here I will record my processing method ). 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

The Code is as follows:

Brand 1:

DataTextField = "OptionText" DataValueField = "optionValue" performanceid = "objectperformance11"
Style = "width: 188px; margin-left:-170px">




Position: absolute; left: 0px; ">

Brand 2:

DataTextField = "OptionText" DataValueField = "optionValue" performanceid = "objectperformance12"
Style = "width: 188px; margin-left:-170px">




Position: absolute; left: 0px; ">

TypeName = "CRR. BusinessRules. OptionManager">





TypeName = "CRR. BusinessRules. OptionManager">

Javascript code

The 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 {
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 {
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 ";
}
}
}