今天客户对项目提出新需求，要求商品品牌不但能选择，还要能够录入，而且录入的品牌名称必须是下拉列表框里面的相（由于商品品牌太多，不好选择，所以有此要求；在此将我的处理方法记录一下）。
按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。
首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。页面部分内容
Code
1<divid="div_Brand_Baby"name="div_Brand_Baby"style="display:none"runat="server">
2<divstyle="float:left;">品牌1：</div>
3<divstyle="position:relative;float:left;">
4<spanstyle="margin-left:170px;width:18px;overflow:hidden;">
5<atlas:UpdatePanelID="UpdatePanel12"runat="server">
6<ContentTemplate>
7<asp:DropDownListID="ddlistFirstConsumeBrand"onchange="ChangeBrand(this)"runat="server"
8DataTextField="OptionText"DataValueField="optionValue"DataSourceID="ObjectDataSource11"
9Style="width:188px;margin-left:-170px">
10</asp:DropDownList>
11</ContentTemplate>
12</atlas:UpdatePanel>
13</span>
14<asp:TextBoxID="txtBrand1"runat="server"onblur="changebrand1(this)"Style="width:170px;
15position:absolute;left:0px;"></asp:TextBox>
16</div>
17<divstyle="float:left;">
18 品牌2：</div>
19<divstyle="position:relative;float:left;">
20<spanstyle="margin-left:170px;width:18px;overflow:hidden;">
21<atlas:UpdatePanelID="UpdatePanel13"runat="server">
22<ContentTemplate>
23<asp:DropDownListID="ddlistSecondConsumeBrand"runat="server"onchange="ChangeBrand(this)"
24DataTextField="OptionText"DataValueField="optionValue"DataSourceID="ObjectDataSource12"
25Style="width:188px;margin-left:-170px">
26</asp:DropDownList>
27</ContentTemplate>
28</atlas:UpdatePanel>
29</span>
30<asp:TextBoxID="txtbrand2"runat="server"onblur="changebrand1(this)"Style="width:170px;
31position:absolute;left:0px;"></asp:TextBox>
32</div>
33<asp:ObjectDataSourceID="ObjectDataSource11"runat="server"SelectMethod="RetrieveMilkBrand_Baby"
34TypeName="CRR.BusinessRules.OptionManager">
35<SelectParameters>
36<asp:ParameterDefaultValue="1"Name="languageID"Type="Int32"/>
37<asp:ParameterDefaultValue="false"Name="addNull"Type="Boolean"/>
38</SelectParameters>
39</asp:ObjectDataSource>
40<asp:ObjectDataSourceID="ObjectDataSource12"runat="server"SelectMethod="RetrieveMilkBrand_Baby"
41TypeName="CRR.BusinessRules.OptionManager">
42<SelectParameters>
43<asp:ParameterDefaultValue="1"Name="languageID"Type="Int32"/>
44<asp:ParameterDefaultValue="true"Name="addNull"Type="Boolean"/>
45<asp:ParameterDefaultValue=""Name="nullString"Type="String"/>
46</SelectParameters>
47</asp:ObjectDataSource>
48</div>javascript代码
javascript code
1functionchangebrand1(oTextbox)
2{
3varbrandTag=document.getElementById("ddlistSecondConsumeBrand");
4varbrand1=document.getElementById("txtbrand1");
5varbrand2=document.getElementById("txtbrand2");
6varbrandcolls=brandTag.options;
7vartextvalue=oTextbox.value;
8varflag=0;
9if(textvalue.length==0)
10{
11flag=1;
12}
13elseif(textvalue.length>0)
14{
15for(vari=0;i<brandcolls.length;i++)
16{
17if(oTextbox==brand1&&brandcolls[i].text==textvalue)
18{
19document.getElementById("ddlistFirstConsumeBrand").options.selectedIndex=i-1;
20flag=1;
21ChangeBrand(document.getElementById("ddlistFirstConsumeBrand"));
22}
23elseif(oTextbox==brand2&&brandcolls[i].text==textvalue)
24{
25brandTag.selectedIndex=i;
26flag=1;
27ChangeBrand(brandTag);
28}
29}
30
31if(flag==0)
32{
33alert("输入品牌错误！");
34oTextbox.value="";
35oTextbox.focus();
36}
37}
38}
39
40functionChangeBrand(me){
41varbrand1ID=document.all.ddlistFirstConsumeBrand.value;
42varbrand2ID=document.all.ddlistSecondConsumeBrand.value;
43varbrandvalue1=document.getElementById("txtbrand1");
44varbrandvalue2=document.getElementById("txtbrand2");
45if((brand1ID=="10")&&(brand2ID=="-1"))
46{
47document.all.ddlistMilkPeriod.value=9;
48}
49
50for(vari=0;i<document.getElementById("ddlistSecondConsumeBrand").options.length;i++)
51{
52if(document.getElementById("ddlistFirstConsumeBrand")==me&&document.all.ddlistFirstConsumeBrand.selectedIndex==i)
53{
54brandvalue1.value=document.getElementById("ddlistFirstConsumeBrand").options[i].text;
55}
56if(document.getElementById("ddlistSecondConsumeBrand")==me&&document.all.ddlistSecondConsumeBrand.selectedIndex==i)
57{
58brandvalue2.value=document.getElementById("ddlistSecondConsumeBrand").options[i].text;
59}
60
61if(i<8&&document.getElementById("ddlistFirstConsumeBrand")==me&&document.all.ddlistFirstConsumeBrand.selectedIndex==i)
62{
63document.all.dv1.style.display="block";
64document.all.dv2.style.display="none";
65document.all.dv3.style.display="none";
66document.getElementById("ddlistPotential").options[0].selected="selected";
67break;
68}
69elseif(i>0&&i<9&&document.getElementById("ddlistSecondConsumeBrand")==me&&document.all.ddlistSecondConsumeBrand.selectedIndex==i)
70{
71document.all.dv1.style.display="block";
72document.all.dv2.style.display="none";
73document.all.dv3.style.display="none";
74document.getElementById("ddlistPotential").options[0].selected="selected";
75break;
76}
77elseif(i>8)
78{
79document.all.dv1.style.display="none";
80document.all.dv2.style.display="block";
81document.all.dv3.style.display="block";
82document.getElementById("ddlistPotential").options[1].selected="selected";
83}
84}
85}
如果觉得《javascript操作select下拉列表框的一点小经验》对你有帮助，请点赞、收藏，并留下你的观点哦！
