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

按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。页面部分内容复制代码代码如下: <div id="div_Brand_Baby" name="div_Brand_Baby" style="display: none" runat="server"> <div style="float: left;">品牌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;"> 品牌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代码复制代码代码如下: 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"; } } }

　　推荐阅读

　　Jquery Ajax学习实例7 Ajax所有过程事件分析示例

一、Ajax所有过程事件分析 JQuery在执行Ajax的过程中会触发很多事件。这些事件可以分为两种事件，一种是局部事件(Local)，一种是全局事件(Global)。局部事件：可以通过$.ajax来调用,你某一个Ajax请求不希>>>详细阅读

本文标题：javascript 操作select下拉列表框的一点小经验

地址：http://www.17bianji.com/kaifa2/JS/26807.html

1/2 1