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";
}
}
}

(0)

相关推荐

  • JS前端框架关于重构的失败经验分享

    好了开始吧 重构这个其实也不是什么大动作,主要要实现的功能嘛,就是把现有的JS代码重新划分一下,解耦现有模块.然后我打算把现有的程序划分一下模块然后重新打包做一个命名空间实现use或者类似于java的Package的东西.那么我只要加载一个use的js文件调用这个文件的use函数,通过设置某些参数,我可以动态地加载所需要的模块.这个是最完美的想法(那时我很傻很天真).好的,噩梦开始了. 前提,我低估了3个月前的自己.//好吧,下面可能会出现un文明用语~~ 首先,计划的第一天,我的打算是分离这个

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

  • Javascript 多浏览器兼容总结(实战经验)

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName

  • 【经验总结】编写JavaScript代码时应遵循的14条规律

    本文讲述了编写JavaScript代码时应遵循的14条规律.分享给大家供大家参考,具体如下: 1. 总是使用 'var' 在javascript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - creates a

  • js动态调用css属性的小规律及实例说明

    刚才看到一篇好的文章介绍js调用css属性,( ^_^ )不错嘛!免的自己忘记,总结一下 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.st

  • 使用node.js半年来总结的 10 条经验

    先不说房价,堵车,雾霾...先说说我这半年使用 Node.js 的经验吧...都是工作上遇到的问题,血的教训.. 1.精确版本号 "一定要精确到具体版本号!使用*直接滚,^和~都不行!",早上刚到公司,我们服务器的头头满眼血丝(估计又凌晨几点睡的),对我抱怨道:"妈蛋,以前写的代码package.json里的版本和服务器正在运行的版本不一样.安装最新的又咣咣一顿报错."此处省略几千字... 好吧.我先打自己脸.以前只会用*...大多时候也没必要写死版本号,使用^和~

  • javascript 框架小结 个人工作经验

    /**************************************************************************************** 作者:萧 枫 QQ:77182997 MSN:xiaofengnet@hotmail.com Email:xiaofengnet@163.com 网址:http://www.d369.net 请保留版权 谢谢合作 版本:V 1.6.1 /*****************************************

  • JavaScript 错误处理与调试经验总结

    下面总结一下JS错误处理与调试的方法 方法1:用alert() 和document.write()方法监视变量值. alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击"确定"按钮,而document.write()则在输出值后继续运行代码.调试JS时可以根据具体情况来选择这种方法. 例如下面代码:将数组a中以1开头的数据添加到数组b中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • jquery.validate.js插件使用经验记录

    最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [例子如下] 1.前台页面 <form id="form1" method="post"> 用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error&q

  • JS效率个人经验谈(8-15更新),加入range技巧

    首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒.我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度.这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条数据,有效数据为1000-1100条,输出复杂的HTML,速度为360ms左右,方法为 正则匹配Match(有循环)希望贴出您的测试数据.行innerHT

  • javascript 构造函数强制调用经验总结

    兴致勃勃地定义了下面这么个构造函数: 复制代码 代码如下: var Coder = function( nick ){ this.nick = nick; }; 定义构造函数结束后呢?没错,赶紧实例化: var coder = Coder( 'casper' ); 这个coder兄弟叫什么名字?赶紧打印下: 复制代码 代码如下: console.log( coder.nick ); //undefined = =b 竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:

  • 写给想学习Javascript的朋友一点学习经验小结

    当然只是个人的经验,有什么不对的也请高手见谅和指正. 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的.不要浪费你自己(很可能是你父母)的钱和时间.趁早死了这个念头. 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师.英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的.而你现在要学的是Javascript,呵呵

随机推荐