今天客户对项目提出新需求，要求商品品牌不但能选择，还要能够录入，而且录入的品牌名称必须是下拉列表框里面的相（由于商品品牌太多，不好选择，所以有此要求；在此将我的处理方法记录一下）。

按照我一贯的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}