2个下拉框实现联动脚本如何写

在一个网页中有一个form,里边有2个下拉框分别是 lx,lx2,其中lx中的值是固定的,如书籍,图片,光盘等,lx2是空的只有一个无.要求是当下拉框lx中选择不同的值时首先清空lx2中的值,然后自动填充下拉框lx2的值,比如在lx中选择了书籍,则首先清空lx2的原来的列表值,然后自动在lx2中填充电脑书籍,做饭书籍,电力书籍等值,在lx中选择了图片,则首先清空lx2的原来的列表值,然后自动在lx2中填充外国图片,中国图片等值.这个脚本如何写,vbscript,javascript都可以

解决方案 »

  1.   

    可以参考这个联动select
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>5_14</title>
    <script src="jquery-1.3.2.js"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
    $("#select1").change(function(){
    var value = $("#select1 option:selected").val();
    if(value=="1"){
    $("#select2").empty();//
    $("#select2").append("<option value='1'>电脑书籍</option>"
    +"<option value='2'>做饭书籍</option>"
    +"<option value='3'>电力书籍</option>");
    }
    if(value=="2"){
    $("#select2").empty();//
    $("#select2").append("<option value='1'>外国图片</option>"
    +"<option value='2'>中国图片</option>"
    +"<option value='3'>外星图片</option>");
    }
    if(value=="3"){
    $("#select2").empty();//
    $("#select2").append("<option value='1'>1111</option>"
    +"<option value='2'>2222</option>"
    +"<option value='3'>3333</option>");
    }
    if(value=="0"){
    alert("请选择!!")
    }
    });
    });
    </script>
    </head><body>
        <form id="fom">
         <select id="select1">
                <option value="0">--</option>
             <option value="1">书籍</option>
                <option value="2">图片</option>
                <option value="3">光盘</option>
            </select>
            <select id="select2">
                
            </select>
        </form>
    </body>
    </html>
    jquery的
      

  3.   

    <select id="Select1">
    <option value="书籍">书籍</option>
    <option value="图片">图片</option>
    <option value="光盘">光盘</option>
    </select>
    <select id="Select2">
    <option value="">None</option>
    </select>
    <script>
    var data={"书籍":["电脑书籍","做饭书籍","电力书籍"],"图片":["外国图片","中国图片"],"光盘":["外国光盘","中国光盘"]};
    window.onload=function(){
        var sel1=document.getElementById("Select1");
        var sel2=document.getElementById("Select2");
        
        sel1.onchange=function(){
            sel2.options.length=0;
            for(var i=0;i<data[sel1.value].length;i++){
                sel2.options[sel2.options.length]=new Option(data[sel1.value][i],data[sel1.value][i]);
            }
        };
    }
    </script>
      

  4.   


     <script type="text/javascript">
                var data = {
                    '书籍': ['语文', '数学', '英语','物理'],
                    '图片': ['壁纸', '表情', '头像'],
                    '光盘': ['VCD', 'DVD', 'BD']
                }
                function ChangeSub(value){
                    loadSub(data[value]);
                }
                
                function loadSub(data){
                    var sub = document.getElementById('sltSub');
                    sub.options.length = 0;
                    for (i = 0; i < data.length; i++) {
                        sub.options[sub.options.length] = new Option(data[i], i)
                    }
                    sub.disabled = false;
                }
            </script><select id="sltParent" onchange="ChangeSub(this.value)">
                <option value="书籍">书籍</option>
                <option value="图片">图片</option>
                <option value="光盘">光盘</option>
            </select>
            <select id="sltSub" disabled='true' style="width:50px;">
            </select>
      

  5.   


    这个人的可以。如果你要是读取数据里的东西。就用ajax吧。
    jquery写的那个复杂了点点。