Posted in Javascript onMarch 20, 2010
按照我一贯的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"; } } }
javascript 操作select下拉列表框的一点小经验
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@