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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
js基于canvas实现时钟组件
Feb 07 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和ACCESS写聊天室(三)
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
结婚十年感言
2015/07/31 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
室外天线与收音机天线杆接合方法
2022/04/05 无线电
选购到合适的激光打印机
2022/04/21 数码科技
Go语言编译原理之源码调试
2022/08/05 Golang