您的位置：首页 > Web前端 > JavaScript

JavaScript的简单联动下拉和控件添加删除

2012-09-14 09:33 162 查看

首先是JavaScript.

<script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var ability0=["姓名","工号"];
var ability1=["PHP","Java"];;
var ability2=["English","Chinese"];;
var ability3=["Cert1","Cert2"];;
var term0=["="];
var term1=[">=","=","<="];
var term2=["had"];
var term3=["had"];
var index = 0;
$(function(){
//初定义
var Astring="#search2 #cability"+index;
var Bstring="#abilitySpan #ability"+index;
var Cstring="#abilitySpan #term"+index;
var Dstring="#search2 #textfield"+index;

//第一个下拉框事件
$($(Astring).get(0)).live("change",function(){
//第二下拉框联动
var t= $($(Bstring).get(0));
var e= t.children();
for(var i=e.length;i>0;i--)
e.remove();
var n = $(this).get(0).selectedIndex;
var a=eval("ability"+n);
for(var i=0;i<a.length;i++)
t.append(new Option(a[i],a[i]));
//第三下拉框联动
var tb= $($(Cstring).get(0));
var eb= tb.children();
for(var i=eb.length;i>0;i--)
eb.remove();
var ab=eval("term"+n);
for(var i=0;i<ab.length;i++)
tb.append(new Option(ab[i],ab[i]));
//输入框联动
var textstring="textfield"+index;
var text = document.getElementById(textstring)
if ( n == 2 || n == 3 )
{
text.style.display="none";
}
else
{
text.style.display="";
}
});
//删除按钮事件
$("#del").live("click",function(){
var Dstring="#search2 #textfield"+index;
if (index == 0)
{
alert("我槽，这你都删");
}
else
{
$($(Dstring).get(0)).parent().remove();
index=index-1;
//统计条件数
var te = document.getElementById("count");
te.value = index;
}

});
//添加按钮事件
$("#add").click(function(){
//添加控件
index = index + 1;
$("#target").append('<div id="search2"><label><select id="cability'+index+'" name="cability'+index+'"><option value="">基本信息</option><option value="">专业技能</option><option value="">基本技能</option><option value="">证书</option></select><span id="abilitySpan"><select id="ability'+index+'" name="ability'+index+'"><option value="">请选择</option></select><select id="term'+index+'" name="term'+index+'"><option value="">=</option></select></span></label><input name="textfield'+index+'" type="text" value="" size="50" id="textfield'+index+'"/></div>');
//控件联动
var Astring="#search2 #cability"+index;
var Bstring="#abilitySpan #ability"+index;
var Cstring="#abilitySpan #term"+index;
$($(Astring).get(0)).live("change",function(){
var t= $($(Bstring).get(0));
var e= t.children();
for(var i=e.length;i>0;i--)
e.remove();
var n = $(this).get(0).selectedIndex;
var a=eval("ability"+n);
for(var i=0;i<a.length;i++)
t.append(new Option(a[i],a[i]));

var tb= $($(Cstring).get(0));
var eb= tb.children();
for(var i=eb.length;i>0;i--)
eb.remove();
var ab=eval("term"+n);
for(var i=0;i<ab.length;i++)
tb.append(new Option(ab[i],ab[i]));

var textstring="textfield"+index;
var text = document.getElementById(textstring)
if ( n == 2 || n == 3 )
{
text.style.display="none";
}
else
{
text.style.display="";
}
});
//统计查询条目
var te = document.getElementById("count");
te.value = index+1;
});
});
</script>

然后是html

<body>

<fieldset id="search0">
<legend  id="search01">
<div id="search02">Search</div>
</legend>
<form id="form1" name="form1" method="get" action="sresult.php">
<div id="search2">
<input type="hidden" id="count" name="count" value=""/>
<label>
<select id="cability0" name="cability0">
<option value="">基本信息</option>
<option value="">专业技能</option>
<option value="">基本技能</option>
<option value="">证书</option>
</select><span id="abilitySpan"><select id="ability0" name="ability0">
<option value="">请选择</option>
</select><select id="term0" name="term0">
<option value="">=</option>
</select></span></label><input name="textfield0" type="text" value="" size="50" id="textfield0" />

<input type="button" value="ADD" id="add" />
<input type="button" value="DEL" id="del" />
</div>

<div id="target"></div>

<div id="search3">
<label>
<input type="submit" name="Submit" value="Search" />
</label>
</div>
</form>
</fieldset>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航