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

　　按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。

　　首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。

　　页面部分内容

复制代码代码如下:

　　<atlas:UpdatePanel ID="UpdatePanel12" runat="server">

　　<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>

　　品牌2：</div>

　　<atlas:UpdatePanel ID="UpdatePanel13" runat="server">

　　<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">

　　<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">

　　<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代码

复制代码代码如下:

　　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("输入品牌错误！");

　　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";

　　}

教程首页更多教程