左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）

示例1:

 

代码
function $(e){return document.getElementById(e);}
function PutRightOneClk(str) {
    if($(str+"0").options.selectedIndex == -1){return false;}
    while($(str+"0").options.selectedIndex > -1){
        var id = $(str+"0").options.selectedIndex
        var varitem = new Option($(str+"0").options[id].text,$(str+"0").options[id].value);
        $(str+"1").options.add(varitem);
        $(str+"0").options.remove(id);
    }
}
function PutRightAllClk(str) {
    if($(str+"0").options.length == 0){return false;}
    for(var i=0;i<$(str+"0").options.length;i++){
        var varitem = new Option($(str+"0").options[i].text,$(str+"0").options[i].value);
        $(str+"1").options.add(varitem);
    }
    $(str+"0").options.length = 0;
}
function PutLeftOneClk(str) {
    if($(str+"1").options.selectedIndex == -1){return false;}
    while($(str+"1").options.selectedIndex > -1){
        var id = $(str+"1").options.selectedIndex
        var varitem = new Option($(str+"1").options[id].text,$(str+"1").options[id].value);
        $(str+"0").options.add(varitem);
        $(str+"1").options.remove(id);
    }
}
function PutLeftAllClk(str) {
    if($(str+"1").options.length == 0){return false;}
    for(var i=0;i<$(str+"1").options.length;i++){
        var varitem = new Option($(str+"1").options[i].text,$(str+"1").options[i].value);
        $(str+"0").options.add(varitem);
    }
    $(str+"1").options.length = 0;
}

 

 

代码
<div style="float:left;">
<select size="10" id="PtNbrs0" class="input" style="width:300px;height:200px;" multiple="multiple" ondblclick="PutRightOneClk('PtNbrs')">
<option>Test01</option>
<option>Test02</option>
<option>Test03</option>
</select>
</div>
<div style="float:left;padding:0 10 0 10;">
<input type="button" value="->" id="PutRightOne" class="btnGray" onclick="PutRightOneClk('PtNbrs')" /><br /><br />
<input type="button" value="->>" id="PutRightAll" class="btnGray" onclick="PutRightAllClk('PtNbrs')" /><br /><br />
<input type="button" value="<-" id="PutLeftOne" class="btnGray" onclick="PutLeftOneClk('PtNbrs')" /><br /><br />
<input type="button" value="<<-" id="PutLeftAll" class="btnGray" onclick="PutLeftAllClk('PtNbrs')" />
</div>
<div>
<select size="10" id="PtNbrs1" class="input" style="width:300px;height:200px;" multiple="multiple" ondblclick="PutLeftOneClk('PtNbrs')">
<option>Test11</option>
<option>Test12</option>
<option>Test13</option>
</select>
</div>
<div style="float:left;">
<select size="10" id="Paras0" class="input" style="width:300px;height:200px;" multiple="multiple" ondblclick="PutRightOneClk('Paras')">
<option>Test01</option>
<option>Test02</option>
<option>Test03</option>
</select>
</div>
<div style="float:left;padding:0 10 0 10;">
<input type="button" value="->" id="PutRightOne" class="btnGray" onclick="PutRightOneClk('Paras')" /><br /><br />
<input type="button" value="->>" id="PutRightAll" class="btnGray" onclick="PutRightAllClk('Paras')" /><br /><br />
<input type="button" value="<-" id="PutLeftOne" class="btnGray" onclick="PutLeftOneClk('Paras')" /><br /><br />
<input type="button" value="<<-" id="PutLeftAll" class="btnGray" onclick="PutLeftAllClk('Paras')" />
</div>
<div>
<select size="10" id="Paras1" class="input" style="width:300px;height:200px;" multiple="multiple" ondblclick="PutLeftOneClk('Paras')">
<option>Test11</option>
<option>Test12</option>
<option>Test13</option>
</select>
</div>

 

 

示例2:

Javascript 操作select下拉框

代码
// 1.判断select选项中 是否存在Value="paraValue"的Item        
function jsSelectIsExitItem(objSelect, objItemValue) {        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].value == objItemValue) {        
            isExit = true;        
            break;        
        }        
    }        
    return isExit;        
}        

// 2.向select选项中 加入一个Item        
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        alert("该Item的Value值已经存在");        
    } else {        
        var varItem = new Option(objItemText, objItemValue);      
        objSelect.options.add(varItem);     
        alert("成功加入");     
    }        
} 

// 3.从select选项中 删除一个Item 
function jsRemoveItemFromSelect(objSelect, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options.remove(i);        
                break;        
            }        
        }        
        alert("成功删除");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}

// 4.删除select中选中的项    
function jsRemoveSelectedItemFromSelect(objSelect) {        
    var length = objSelect.options.length - 1;    
    for(var i = length; i >= 0; i--){    
        if(objSelect[i].selected == true){    
            objSelect.options[i] = null;    
        }    
    }    
} 

// 5.修改select选项中 value="paraValue"的text为"paraText"        
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options[i].text = objItemText;        
                break;        
            }        
        }        
        alert("成功修改");        
    } else {        
        alert("该select中 不存在该项");        
    }        
} 

// 6.设置select中text="paraText"的第一个Item为选中        
function jsSelectItemByValue(objSelect, objItemText) {            
    //判断是否存在        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].text == objItemText) {        
            objSelect.options[i].selected = true;        
            isExit = true;        
            break;        
        }        
    }              
    //Show出结果        
    if (isExit) {        
        alert("成功选中");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}

// 7.设置select中value="paraValue"的Item为选中    
document.all.objSelect.value = objItemValue;   

// 8.得到select的当前选中项的value    
var currSelectValue = document.all.objSelect.value;   

// 9.得到select的当前选中项的text    
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;   

// 10.得到select的当前选中项的Index    
var currSelectIndex = document.all.objSelect.selectedIndex;   

// 11.清空select的项    
document.all.objSelect.options.length = 0;

 

 

示例三:

 

  1. <html>  
  2. <head></head>  
  3. <BODY>  
  4. <PRE class=js name="code"><script language="JavaScript">  
  5. function copyToList(from,to)    
  6. //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字   
  7. //你可以根据你的具体情况修改   
  8. {   
  9. fromList = eval('document.forms[0].' + from);   
  10. toList = eval('document.forms[0].' + to);   
  11. if (toList.options.length > 0 && toList.options[0].value == 'temp'){   
  12.     toList.options.length = 0;   
  13. }   
  14. var sel = false;   
  15. for (i=0;i<fromList.options.length;i++){   
  16.     var current = fromList.options[i];   
  17.     if (current.selected){   
  18.       sel = true;   
  19.       if (current.value == 'temp'){   
  20.         alert ('你不能选择这个项目!');   
  21.         return;   
  22.       }   
  23.       txt = current.text;   
  24.       val = current.value;   
  25.       toList.options[toList.length] = new Option(txt,val);   
  26.       fromList.options[i] = null;   
  27.       i--;   
  28.     }   
  29. }   
  30. }   
  31. //这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序//能取得相关数据   
  32. function allSelect(){   
  33. List = document.forms[0].chosen;   
  34. if (List.length && List.options[0].value == 'temp') return;   
  35. for (i=0;i<List.length;i++){   
  36.      List.options[i].selected = true;   
  37. }   
  38. }   
  39. function copyAll(from,to){   
  40.   
  41. var fromList = eval('document.forms[0].' + from);   
  42. var toList = eval('document.forms[0].' + to);   
  43. if (toList.options.length > 0 && toList.options[0].value == 'temp'){   
  44.     toList.options.length = 0;   
  45. }   
  46. for (i=0;i<fromList.options.length;i++){   
  47.       var current = fromList.options[i];   
  48.       toList.options[toList.length] = new Option(current.text,current.value);   
  49.       fromList.options[i] = null;   
  50.       i--;   
  51. }   
  52. }   
  53. </script></PRE>  
  54. <BR><table border="0"> <form onSubmit="allSelect()">  
  55. <BR>   <tr>  
  56. <BR>     <td>  
  57. <BR>        <select name="possible" size="4" MULTIPLE width=200 style="width: 200px">  
  58. <BR>                    <option value="1">中国广州   
  59. <BR>                    <option value="2">中国上海   
  60. <BR>                    <option value="3">中国北京   
  61. <BR>                    <option value="4">中国武汉   
  62. <BR>        
  63. <BR>          </select>  
  64. <BR>       </td>  
  65. <BR>       <td><a href="javascript:copyToList('possible','chosen')"></a>  
  66. <BR>       <br>  
  67. <BR>       <br>  
  68. <BR>       <a href="javascript:copyAll('possible','chosen')"></a>  
  69. <BR>       <br><br>  
  70. <BR>       </a><a href="javascript:copyToList('chosen','possible')">/a>        <br><br>                     
  71. <BR>       <a href="javascript:copyAll('chosen','possible')"></a>  
  72. <BR>       <br>  
  73. <BR>       </td>  
  74. <BR>       <td>  
  75. <BR>         <select name="chosen" size="4" MULTIPLE width=200 style="width: 200px;">  
  76. <BR>             <option value="temp">从左边选择你的地区    
  77. <BR>         </select>  
  78. <BR>        </td>  
  79. <BR>       </tr>    
  80. <BR>     </form>  
  81. <BR>   </table>  
  82. <BR>  
  83. <BR></BODY>  
  84. <BR></html>  

转自:http://alan3258.javaeye.com/blog/324180

 

示例四:js获取select多选表单里的值


 

代码
<script language="JavaScript">
<!--
function checkselect(objname){
    o = document.getElementById(objname);
    t = document.getElementById("output");
    var intvalue="";
    for(i=0;i<o.length;i++){   
        if(o.options[i].selected){
            intvalue+=o.options[i].value+",";
        }
    }
    t.value=intvalue.substr(0,intvalue.length-1);
}
//-->
</script>
<select name="objsel" size=8 multiple>
    <option value="1">测试一
    <option value="2">测试二
    <option value="3">测试三
    <option value="4">测试四
    <option value="5">测试五
</select>
<input type="button" onclick="checkselect('objsel');" value="输出">选中的项目：<input type="text" name="output">
 

 

示例5:

 

DropDownList 不能多选,要多选,只能用ListBox或是HTML的select(参数加个multiple)

Script 代码

     <script language="javascript">
        function Test()
        {
            o = document.getElementById("lbTest");
            var intvalue="";
            for(i=0;i<o.length;i++){  
                if(o.options[i].selected){
                    intvalue+=o.options[i].value+",";
                }
            }
            alert( intvalue.substr(0,intvalue.length-1) );

        }
    </script>

 

HTML代码

        <asp:ListBox ID="lbTest" runat="Server" SelectionMode="Multiple">
            <asp:ListItem Text="11" Value="1"></asp:ListItem>
            <asp:ListItem Text="22" Value="2"></asp:ListItem>
            <asp:ListItem Text="33" Value="3"></asp:ListItem>
        </asp:ListBox>

   或是


        <select name="lbTest" size=8 multiple>
            <option value="0" selected>请选择
            <option value="1">测试一
            <option value="2">测试二
            <option value="3">测试三
            <option value="4">测试四
            <option value="5">测试五
        </select>

 

 

 

posted @ 2009-12-31 00:28  唔愛吃蘋果  阅读(3834)  评论(0)  编辑  收藏  举报