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

示例一:

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" οndblclick="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" οnclick="PutRightOneClk('PtNbrs')" /><br /><br />
<input type="button" value="->>" id="PutRightAll" class="btnGray" οnclick="PutRightAllClk('PtNbrs')" /><br /><br />
<input type="button" value="<-" id="PutLeftOne" class="btnGray" οnclick="PutLeftOneClk('PtNbrs')" /><br /><br />
<input type="button" value="<<-" id="PutLeftAll" class="btnGray" οnclick="PutLeftAllClk('PtNbrs')" />
</div>
<div>
<select size="10" id="PtNbrs1" class="input" style="width:300px;height:200px;" multiple="multiple" οndblclick="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" οndblclick="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" οnclick="PutRightOneClk('Paras')" /><br /><br />
<input type="button" value="->>" id="PutRightAll" class="btnGray" οnclick="PutRightAllClk('Paras')" /><br /><br />
<input type="button" value="<-" id="PutLeftOne" class="btnGray" οnclick="PutLeftOneClk('Paras')" /><br /><br />
<input type="button" value="<<-" id="PutLeftAll" class="btnGray" οnclick="PutLeftAllClk('Paras')" />
</div>
<div>
<select size="10" id="Paras1" class="input" style="width:300px;height:200px;" multiple="multiple" οndblclick="PutLeftOneClk('Paras')">
<option>Test11</option>
<option>Test12</option>
<option>Test13</option>
</select>
</div>

示例二:

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;

示例三:

<html>
<head></head>
<BODY>
<pre class="js" name="code"><script language="JavaScript">
function copyToList(from,to) 
//from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字
//你可以根据你的具体情况修改
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp'){
    toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++){
    var current = fromList.options[i];
    if (current.selected){
      sel = true;
      if (current.value == 'temp'){
        alert ('你不能选择这个项目!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
}
}
//这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序//能取得相关数据
function allSelect(){
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++){
     List.options[i].selected = true;
}
}
function copyAll(from,to){

var fromList = eval('document.forms[0].' + from);
var toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp'){
    toList.options.length = 0;
}
for (i=0;i<fromList.options.length;i++){
      var current = fromList.options[i];
      toList.options[toList.length] = new Option(current.text,current.value);
      fromList.options[i] = null;
      i--;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
   <tr>
     <td>
        <select name="possible" size="4" MULTIPLE width=200 style="width: 200px">
                    <option value="1">中国广州
                    <option value="2">中国上海
                   <option value="3">中国北京
                   <option value="4">中国武汉
     
          </select>
       </td>
       <td><a href="javascript:copyToList('possible','chosen')"></a>
       <br>
       <br>
       <a href="javascript:copyAll('possible','chosen')"></a>
       <br><br>
       </a><a href="javascript:copyToList('chosen','possible')">/a>        <br><br>                  
       <a href="javascript:copyAll('chosen','possible')"></a>
       <br>
       </td>
       <td>
         <select name="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
             <option value="temp">从左边选择你的地区 
         </select>
        </td>
       </tr> 
     </form>
   </table>
</BODY>
</html>

示例四:

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" οnclick="checkselect('objsel');" value="输出">选中的项目：<input type="text" name="output">

更多精彩博文请到言会咸的博客

网址:http://blog.csdn.net/aoyoo111