- <html>
- <script language="javascript">
- function insertall(){
- var oDest=document.all.lstSelected;
- for (var i=0;i<document.all.personList.options.length;i++)
- {
- var e=document.all.personList.options[i];
- insert(oDest,e.innerText,e.value);
- }
- oDest=document.all.personList;
- removeAll(oDest);
- }
- function removeAll(oSelect){
- for( i=oSelect.childNodes.length -1;i>=0;i--){
- var node = oSelect.childNodes(i);
- oSelect.removeChild(node);
- }
- }
- function insert2(){
- var oDest=document.all.lstSelected;
- for (var i=0;i<document.all.personList.options.length;i++)
- {
- var e=document.all.personList.options[i];
- if (e.selected){
- insert(oDest,e.innerText,e.value);
- }
- }
- oDest=document.all.personList;
- removeSelected(oDest);
- }
- function yichu2(){
- var oDest=document.all.personList;
- for (var i=0;i<document.all.lstSelected.options.length;i++)
- {
- var e=document.all.lstSelected.options[i];
- if (e.selected){
- insert(oDest,e.innerText,e.value);
- }
- }
- oDest=document.all.lstSelected;
- removeSelected(oDest);
- }
- function quanyi2(){
- var oDest=document.all.personList;
- for (var i=0;i<document.all.lstSelected.options.length;i++)
- {
- var e=document.all.lstSelected.options[i];
- insert(oDest,e.innerText,e.value);
- }
- oDest=document.all.lstSelected;
- removeAll(oDest);
- }
- function insert(oDest,name, value){
- var oNewNode = document.createElement("option");
- oNewNode.innerText=name;
- oNewNode.value = value;
- addUniqueNode(oNewNode, oDest)
- }
- function addUniqueNode(node, oDest){
- var oNewNode = document.createElement("option");
- var nodeExist = false;
- for(y in oDest.children){
- if(node.value == oDest.children[y].value){
- nodeExist = true;
- break;
- }
- }
- if(!nodeExist){
- var newNode = node.cloneNode(true);
- oDest.appendChild(newNode);
- }
- }
- function removeSelected(oSelect){
- for( i=oSelect.childNodes.length -1;i>=0;i--){
- var node = oSelect.childNodes(i);
- if(node.selected){
- oSelect.removeChild(node);
- }
- }
- }
- </script>
- <body>
- <table border="0">
- <tr>
- <td>
- <select name="personList" size="4" MULTIPLE style="width: 200px;height:100px">
- <option value="1">中国广州</option>
- <option value="2">中国上海</option>
- <option value="3">中国北京</option>
- <option value="4">中国武汉</option>
- </select>
- </td>
- <td width=50>
- <input name="add" type="button" onClick="insert2();" value="添 加">
- <input name="yichu" type="button" onClick="yichu2();" value="移 除">
- <input name="quanyi" type="button" onClick="quanyi2();" value="全 移" >
- <input name="addall" type="button" onClick="insertall();" value="全 加">
- </td>
- <td>
- <select name="lstSelected" size="4" MULTIPLE style="width:200px;height:100px">
- </select>
- </td>
- </tr>
- </table>
- </body>
- </html>
JS多项选择脚本
最新推荐文章于 2022-11-21 09:25:03 发布