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