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

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

页面部分内容

Code
1

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

javascript code
1

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

if(flag==0)
32

{
33

alert("输入品牌错误！");
34

oTextbox.value="";
35

oTextbox.focus();
36

}
37

}
38

}
39

function 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

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

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

}

转载于:https://www.cnblogs.com/yohop/archive/2009/09/10/1564394.html

javascript操作select下拉列表框的一点小经验相关推荐

JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JavaScript操作select标签详解
获取select值获取显示的汉字 document.getElementById("bigclass").options[window.document.getElementBy ...
Win03+IIS6 部署.NetFramework4(ASP.NET4)的一点小经验
今天心血来潮就把站点升级为基于.Net Framework4的ASP.NET4了(WebForm).中间碰到一些小问题,这里记录一下.万一有哪位兄弟碰到,也算造福社会了- 首先用VS2010打开解决 ...
javascript操作select元素一例
熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...
哈工大政治课的一点小经验
背景介绍: 我是一名哈工大计算机的大三下学生.大一下到大二下的三门政治课<近代史>,<毛概>,<马哲>我的分数是99,93,93(百分制),排名是2/120(+), ...
台式计算机的日常保养,电脑台式机的维护保养的一点小经验
就在前不久,我家里的台式机在运行了将近六年后,终于发生故障开不了机了,开机后主机工作,但鼠标.键盘灯不亮,屏幕无显示,这是在运行了将近六年后第一次正儿八经地发生的故障,假如是别人的机子遇到这种情况, ...
面试字节跳动的一点小经验
我在 2019 年 7 月 8 日入职了字节跳动,借着这次机会想与小伙伴们分享一下字节跳动的面试经验,希望对你有用. 通过本篇文章你将了解到: 应该抱着什么样的心态去大公司加入字节跳动前我是如何做准 ...
转 JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）...
收藏一下 1.判断select选项中是否存在Value="paraValue"的Item 2.向select选项中加入一个Item 3.从select选项中删除一个Item ...
ListCtrl::DeleteColumn的一点小经验
今天在写程序的时候,发现DeleteColumn有点小问题. 我想删除List的所有Column,于是用下面的语句. m_list_mailinfo.DeleteColumn(0); m_list_ ...

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

javascript操作select下拉列表框的一点小经验相关推荐

最新文章

热门文章