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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
js实现简单抽奖功能
Nov 24 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
js实现简单的验证码
2015/12/25 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python面向对象编程基础实例分析
2020/01/17 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Sony C++笔试题
2013/03/10 面试题
土建资料员岗位职责
2014/01/04 职场文书
停车位租赁协议书
2014/09/24 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
小学运动会入场口号
2015/12/24 职场文书
六年级数学教学反思
2016/02/16 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL