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


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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
javascript高亮效果的二种实现方法
Sep 14 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
js 格式化时间日期函数小结
Mar 20 #Javascript
window.location.hash 属性使用说明
Mar 20 #Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 #Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 #Javascript
js 数组克隆方法 小结
Mar 20 #Javascript
vs2003 js文件编码问题的解决方法
Mar 20 #Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python Queue模块详细介绍及实例
2016/12/27 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Flask框架web开发之零基础入门
2018/12/10 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
《要下雨了》教学反思
2014/02/17 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
英语辞职信怎么写
2015/02/28 职场文书
入党介绍人意见范文
2015/06/01 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
一文搞懂Java中的注解和反射
2022/06/21 Java/Android