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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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实现MySQL更新记录的代码
2008/06/07 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python实现自动登录
2018/09/17 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
大学军训感言800字
2014/02/27 职场文书
老师对学生的寄语
2014/04/09 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS