当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript 操作select下拉列表框的一点小经验

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

2019年07月19日  | 移动技术网IT编程  | 我要评论
按照我一贯的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";
}
}
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网