日期:2014-05-16  浏览次数:20419 次

如何利用js实现两个select之间的数据传递
HTML code

   <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px">
                        </select>
                    </td>
                    <td style="height: 100px" width="20">
                        <div style="height:100%;padding-top:80px;">
                            &nbsp;<b>→</b></div>
                    </td>
                    <td>
                        <select id="TypeLeve2" name="TypeLevel2"" 
                            size="13" style="WIDTH: 100px">
                            <option value="">不选</option>
                        </select>
                    </td>
                </tr>
            </table>



如上,如何实现按下“→”TypeLevel1中选中的内容传递到 TypeLevel2中
或者用别的方法实现同样的功能~~请大家不吝赐教~~谢谢

------解决方案--------------------
HTML code
  <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        </select>
                    </td>
                    <td style="height: 100px" width="20">
                        <div style="height:100%;padding-top:80px;">
                            &nbsp;<b style="cursor:pointer;" onclick="move(true)">→</b><br /><br />
                            <b style="cursor:pointer;" onclick="move()">←</b></div>
                    </td>
                    <td>
                        <select id="TypeLevel2" name="TypeLevel2"
                            size="13" style="WIDTH: 100px">
                            <option value="">不选</option>
                        </select>
                    </td>
                </tr>
            </table>
            <script type="text/javascript">
                function move(toRight) {
                    var s1 = document.getElementById('TypeLevel1'), s2 = document.getElementById('TypeLevel2');
                    if (toRight) {
                        if (s1.selectedIndex == -1) { alert('请选择要移动的Option!'); return; }
                        s2.appendChild(s1.options[s1.selectedIndex]);
                    }
                    else {
                        if (s2.selectedIndex == -1) { alert('请选择要移动的Option!'); return; }
                        s1.appendChild(s2.options[s2.selectedIndex]);
                    }
                }
            </script>

------解决方案--------------------
JScript code

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.js">
            
        </script>
        
    </head>
    <body>
        <table border="0" cellpadding="0" cel