示例一:
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