首先是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>