javascript 操作select下拉列表框的一点小经验_Javascript教程-查字典教程网
javascript 操作select下拉列表框的一点小经验
javascript 操作select下拉列表框的一点小经验
发布时间:2016-12-30 来源:查字典编辑
摘要:按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成。首先来分析一...

按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成。

首先来分析一下具体情况:这个页面是一个更新页面,品牌有品牌1和品牌2两个字段,品牌2可以为空,品牌1不能为空,所以品牌2的下拉列表框比品牌1多一项;如果选择了品牌的前8相中的任意一项,“活跃状态”要隐藏,否则“活跃状态”默认显示状态为“潜在”;当查询的结果品牌1和品牌2有任意一项在品牌的前8相中,“活跃状态”也要隐藏,否则“活跃状态”默认显示状态为“潜在”。

页面部分内容

复制代码 代码如下:

<div id="div_Brand_Baby" name="div_Brand_Baby" runat="server">

<div>品牌1:</div>

<div>

<span>

<atlas:UpdatePanel ID="UpdatePanel12" runat="server">

<ContentTemplate>

<asp:DropDownList ID="ddlistFirstConsumeBrand" onchange="ChangeBrand(this)" runat="server"

DataTextField="OptionText" DataValueField="optionValue" DataSourceID="ObjectDataSource11"

>

</asp:DropDownList>

</ContentTemplate>

</atlas:UpdatePanel>

</span>

<asp:TextBox ID="txtBrand1" runat="server" onblur="changebrand1(this)"></asp:TextBox>

</div>

<div>

品牌2:</div>

<div>

<span>

<atlas:UpdatePanel ID="UpdatePanel13" runat="server">

<ContentTemplate>

<asp:DropDownList ID="ddlistSecondConsumeBrand" runat="server" onchange="ChangeBrand(this)"

DataTextField="OptionText" DataValueField="optionValue" DataSourceID="ObjectDataSource12"

>

</asp:DropDownList>

</ContentTemplate>

</atlas:UpdatePanel>

</span>

<asp:TextBox ID="txtbrand2" runat="server" onblur="changebrand1(this)"></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教程学习
    热门Javascript教程学习
    编程开发子分类