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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
详解React 元素渲染
Jul 07 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
Angular的$http与$location
2016/12/26 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现按长宽比缩放图片
2018/06/07 Python
python简易远程控制单线程版
2018/06/20 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python实现微信防撤回神器
2019/04/29 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
公司年底活动方案
2014/08/17 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
Python sklearn分类决策树方法详解
2022/09/23 Python