javascript操作select下拉列表框的一点小经验

今天客户对项目提出新需求，要求商品品牌不但能选择，还要能够录入，而且录入的品牌名称必须是下拉列表框里面的相（由于商品品牌太多，不好选择，所以有此要求；在此将我的处理方法记录一下）。
按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。
首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。

页面部分内容

 1<div id="div_Brand_Baby" name="div_Brand_Baby" style="display: none" runat="server">
 2                            <div style="float: left;">品牌1：</div>
 3                            <div style="position: relative; float: left;">
 4                                <span style="margin-left: 170px; width: 18px; overflow: hidden;">
 5                                    <atlas:UpdatePanel ID="UpdatePanel12" runat="server">
 6                                        <ContentTemplate>
 7                                            <asp:DropDownList ID="ddlistFirstConsumeBrand" onchange="ChangeBrand(this)" runat="server"
 8                                                DataTextField="OptionText" DataValueField="optionValue" DataSourceID="ObjectDataSource11"
 9                                                Style="width: 188px; margin-left: -170px">
10                                            </asp:DropDownList>
11                                        </ContentTemplate>
12                                    </atlas:UpdatePanel>
13                                </span>
14                                <asp:TextBox ID="txtBrand1" runat="server" onblur="changebrand1(this)" Style="width: 170px;
15                                    position: absolute; left: 0px;"></asp:TextBox>
16                            </div>
17                            <div style="float: left;">
18                                &nbsp;&nbsp;品牌2：</div>
19                            <div style="position: relative; float: left;">
20                                <span style="margin-left: 170px; width: 18px; overflow: hidden;">
21                                    <atlas:UpdatePanel ID="UpdatePanel13" runat="server">
22                                        <ContentTemplate>
23                                            <asp:DropDownList ID="ddlistSecondConsumeBrand" runat="server" onchange="ChangeBrand(this)"
24                                                DataTextField="OptionText" DataValueField="optionValue" DataSourceID="ObjectDataSource12"
25                                                Style="width: 188px; margin-left: -170px">
26                                            </asp:DropDownList>
27                                        </ContentTemplate>
28                                    </atlas:UpdatePanel>
29                                </span>
30                                <asp:TextBox ID="txtbrand2" runat="server" onblur="changebrand1(this)" Style="width: 170px;
31                                    position: absolute; left: 0px;"></asp:TextBox>
32                            </div>
33                            <asp:ObjectDataSource ID="ObjectDataSource11" runat="server" SelectMethod="RetrieveMilkBrand_Baby"
34                                TypeName="CRR.BusinessRules.OptionManager">
35                                <SelectParameters>
36                                    <asp:Parameter DefaultValue="1" Name="languageID" Type="Int32" />
37                                    <asp:Parameter DefaultValue="false" Name="addNull" Type="Boolean" />
38                                </SelectParameters>
39                            </asp:ObjectDataSource>
40                            <asp:ObjectDataSource ID="ObjectDataSource12" runat="server" SelectMethod="RetrieveMilkBrand_Baby"
41                                TypeName="CRR.BusinessRules.OptionManager">
42                                <SelectParameters>
43                                    <asp:Parameter DefaultValue="1" Name="languageID" Type="Int32" />
44                                    <asp:Parameter DefaultValue="true" Name="addNull" Type="Boolean" />
45                                    <asp:Parameter DefaultValue="  " Name="nullString" Type="String" />
46                                </SelectParameters>
47                            </asp:ObjectDataSource>
48                        </div>

javascript代码

 1function changebrand1(oTextbox)
 2{
 3    var brandTag=document.getElementById("ddlistSecondConsumeBrand");
 4    var brand1=document.getElementById("txtbrand1");
 5    var brand2=document.getElementById("txtbrand2");
 6    var brandcolls=brandTag.options;
 7    var textvalue=oTextbox.value;
 8    var flag=0;
 9    if(textvalue.length==0)
10    {
11        flag=1;
12    }
13    else if(textvalue.length>0)
14    {
15        for(var i=0;i<brandcolls.length;i++)
16        {
17            if(oTextbox==brand1 && brandcolls[i].text==textvalue)
18            {
19                document.getElementById("ddlistFirstConsumeBrand").options.selectedIndex=i-1;
20                flag=1;
21                ChangeBrand(document.getElementById("ddlistFirstConsumeBrand"));
22            }
23            else if(oTextbox==brand2 && brandcolls[i].text==textvalue)
24            {
25                brandTag.selectedIndex=i;
26                flag=1;
27                ChangeBrand(brandTag);
28            }
29        }
30        
31        if(flag==0)
32        {
33            alert("输入品牌错误！");  
34            oTextbox.value="";  
35            oTextbox.focus();
36        }
37    }
38}
39
40function ChangeBrand(me){
41        var brand1ID = document.all.ddlistFirstConsumeBrand.value;
42        var brand2ID = document.all.ddlistSecondConsumeBrand.value;
43        var brandvalue1=document.getElementById("txtbrand1");
44        var brandvalue2=document.getElementById("txtbrand2");
45        if((brand1ID=="10")&&(brand2ID=="-1"))
46        {
47            document.all.ddlistMilkPeriod.value=9;
48        }
49        
50        for(var i=0;i<document.getElementById("ddlistSecondConsumeBrand").options.length;i++)
51        {
52            if(document.getElementById("ddlistFirstConsumeBrand") == me && document.all.ddlistFirstConsumeBrand.selectedIndex==i)
53            {
54                brandvalue1.value=document.getElementById("ddlistFirstConsumeBrand").options[i].text;
55            }
56            if(document.getElementById("ddlistSecondConsumeBrand") == me && document.all.ddlistSecondConsumeBrand.selectedIndex==i)
57            {
58                brandvalue2.value=document.getElementById("ddlistSecondConsumeBrand").options[i].text;
59            }
60            
61            if(i<8 && document.getElementById("ddlistFirstConsumeBrand") == me && document.all.ddlistFirstConsumeBrand.selectedIndex==i)
62            {
63                document.all.dv1.style.display="block";
64                document.all.dv2.style.display="none";
65                document.all.dv3.style.display="none";
66                document.getElementById("ddlistPotential").options[0].selected="selected";
67                break;
68            }
69            else if(i>0 && i<9 && document.getElementById("ddlistSecondConsumeBrand") == me && document.all.ddlistSecondConsumeBrand.selectedIndex==i)
70            {
71                document.all.dv1.style.display="block";
72                document.all.dv2.style.display="none";
73                document.all.dv3.style.display="none";
74                document.getElementById("ddlistPotential").options[0].selected="selected";
75                break;
76            }
77            else if(i>8)
78            { 
79                document.all.dv1.style.display="none";
80                document.all.dv2.style.display="block";
81                document.all.dv3.style.display="block";
82                document.getElementById("ddlistPotential").options[1].selected="selected";
83            }
84        }
85}