Loading

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

首先是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>
posted @ 2012-09-14 09:33  魍魉_198x  阅读(407)  评论(0)  编辑  收藏  举报