如何用JS做select的三级联动

如何用JS 做3级联动第一个框内容点击 add后进第二个框 ，
第二个框内容点击 add后进第三个框同样
第三个框内容 delete后进第二个框
第二个框内容delete后进第一个框

解决方案 »

  1.   

    <!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>无标题文档</title>
    <script type="text/javascript">
    function mv(f, t) {
    var of = document.getElementById(f);
    var obj = of.getElementsByTagName('option');
    var ot = document.getElementById(t);
    var i = of.selectedIndex;
    ot.add(obj[i].cloneNode(true), null);
    of.remove(i);
    }window.onload = function() {
    document.getElementById('b1_ADD').onclick = function() {
    mv('s1', 's2');
    }
    document.getElementById('b1_DELETE').onclick = function() {
    mv('s2', 's1');
    }
    document.getElementById('b2_ADD').onclick = function() {
    mv('s2', 's3');
    }
    document.getElementById('b2_DELETE').onclick = function() {
    mv('s3', 's2');
    }
    }
    </script>
    </head><body>
    <select size="10" id="s1">
    <option>S1_1</option>
        <option>S1_2</option>
        <option>S1_3</option>
    </select>
    <button id="b1_ADD">ADD&gt;&gt;</button><button id="b1_DELETE">&lt;&lt;DEL</button><select size="10" id="s2">
    <option>S2_1</option>
        <option>S2_2</option>
        <option>S2_3</option>
    </select>
    <button id="b2_ADD">ADD&gt;&gt;</button><button id="b2_DELETE">&lt;&lt;DEL</button><select size="10" id="s3">
    <option>S3_1</option>
        <option>S3_2</option>
        <option>S3_3</option>
    </select>
    </body>
    </html>
      

  2.   

    //函数还可以精简一下，不过IE6/7/8下有问题，明天再查下资料看
    function mv(f, t) {
    var of = document.getElementById(f);
    var obj = of.getElementsByTagName('option');
    var ot = document.getElementById(t);
    var i = of.selectedIndex;
    ot.add(obj[i], null);
    }