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

所属分类: 网络编程 / JavaScript 阅读数: 1360
收藏 0 赞 0 分享
按照我一贯的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;">
&nbsp;&nbsp;品牌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";
}
}
}
更多精彩内容其他人还在看

js实现图片上传预览原理分析

这篇文章主要为大家详细介绍了js实现图片上传预览的原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Angular限制input框输入金额(是小数的话只保留两位小数点)

最近做项目遇到这样的需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码,需要的的朋友参考下吧
收藏 0 赞 0 分享

详解vue-cli + webpack 多页面实例配置优化方法

本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)

本篇文章主要介绍了React-Native解决键盘遮挡问题(Keyboard遮挡问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript反弹动画效果的实现代码

本文通过实例代码给大家介绍了js反弹动画效果的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享

解决vue2.x中数据渲染以及vuex缓存的问题

本篇文章主要介绍了vue2.x中请求之前数据显示以及vuex缓存的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jsonp跨域请求详解

这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

解决vue里碰到 $refs 的问题的方法

本篇文章主要介绍了解决vue里碰到 $refs 的问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js自定义弹框插件的封装

这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装,自己封装一个弹框插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue $refs的基本用法

本篇文章主要介绍了深入理解vue $refs的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多