如何利用js实现两个select之间的数据传递
<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;"> <b>→</b></div> </td> <td> <select id="TypeLeve2" name="TypeLevel2"" size="13" style="WIDTH: 100px"> <option value="">不选</option> </select> </td> </tr> </table>
<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;"> <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>
[解决办法]
<html> <head> <script type="text/javascript" src="jquery-1.8.0.js"> </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px"> <option selected="selected">请选择</option> <option >apple</option> <option>banana</option> </select> </td> <td style="height: 100px;border:solid 1px black" width="20"> <div style="height:100%;padding-top:80px;"> <b>→</b></div> </td> <td> <select id="TypeLeve2" name="TypeLevel2"" size="13" style="WIDTH: 100px"> </select> </td> </tr> </table> <script type="text/javascript"> $(function(){ $("table tr td:nth-child(2)").click(function(){ var option = $("#TypeLevel1>option:selected"); var optionText=option.text(); if(optionText!="请选择") { var options=$("#TypeLeve2 option"); if(options.size()<=0) { var insertStr = "<option>"+optionText+"</option>"; $(insertStr).appendTo($("#TypeLeve2")); } else { var canInsert=true; $("#TypeLeve2 option").each(function(i,n){ if($(n).text()==optionText) { canInsert=false; return; } }); if(canInsert) { var insertStr = "<option>"+optionText+"</option>"; $(insertStr).appendTo($("#TypeLeve2")); } } } }); }); </script> </body></html>
[解决办法]
来一个支持多选的移动。鼠标按住不放拖动可以选择多个目标同时移动。
想要从右往左移动只需添加leftToRight('TypeLevel2', 'TypeLeve1');即可。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled</title></head><body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px" multiple="multiple"> <option value="java">Java</option> <option value="php">PHP</option> <option value="c">C</option> <option value="c++">C++</option> <option value=".net">.NET</option> </select> </td><td style="height: 100px" width="20"> <div style="height:100%;padding-top:80px;"> <b id="leftToRight">→</b></div> </td><td> <select id="TypeLeve2" name="TypeLevel2" size="13" style="WIDTH: 100px" multiple="multiple"> <option value="">不选</option> </select> </td> </tr></table><script type="text/javascript"> var $ = function(n, pn) {return (pn||document).getElementById(n);} $('leftToRight').onclick = function() { leftToRight('TypeLevel1', 'TypeLeve2'); } function leftToRight(from, to) { this._from = $(from); this._to = $(to); var selectedIdx = this._from.selectedIndex; while (selectedIdx > -1) { var opt = this._from.options[selectedIdx]; var newopt = document.createElement('option'); newopt.value = opt.value; newopt.text = opt.text; this._to.add(newopt); this._from.remove(selectedIdx); selectedIdx = this._from.selectedIndex; } }</script></body></html>