select 左右多選實現，select多選實現

最後更新：2014-09-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

select 左右多選實現，select多選實現
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<table>
<tr>
<td width="20%" class="biaoti-2" align="right">標籤：</td>
<td class="formword" colspan="3" width="80%">
<div style="float:left;">
<select size="5" id="ptNbrs0" class="input" style="width:200px;height:200px;" multiple="multiple" ondblclick="PutRightOneClk('ptNbrs')">
<option value="0" >qqqq</option>
<option value="1" >wwww</option>
<option value="2" >eeee</option>
</select>
</div>
<div style="float:left">
<input type="button" value=" > " id="PutRightOne" class="button1" onclick="PutRightOneClk('ptNbrs')" /><br /><br />
<input type="button" value=">>" id="PutRightAll" class="button1" onclick="PutRightAllClk('ptNbrs')" /><br /><br />
<input type="button" value=" < " id="PutLeftOne" class="button1" onclick="PutLeftOneClk('ptNbrs')" /><br /><br />
<input type="button" value="<<" id="PutLeftAll" class="button1" onclick="PutLeftAllClk('ptNbrs')" />
</div>
<div>
<select size="5" id="ptNbrs1" name="ptNbrs1" class="input" style="width:200px;height:200px;" multiple="multiple" ondblclick="PutLeftOneClk('ptNbrs')">
</select>
</div>
</td>
</tr>
</table>
</body>
</html>
html中怎實現具有下拉效果的多選框

select標記有一個屬性multiple，將其設定成multiple="multiple"按住Ctrl鍵即可實現多選。請看例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<script language="javascript">
function getValue()
{
var s = "";
for(var i=0;i<form1.ss.options.length;i++)
{
if(form1.ss.options[i].selected)
{
s+=form1.ss.options[i].value;
}
}
alert(s);
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
請選擇：
<select id="ss" name="ss" size="5" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<input type="button" name="Submit" value="提交" onclick="getValue()" />
</form>
</body>
</html>
**************************補充**********************
修改select標籤的size屬性，把它的值改......餘下全文>>

怎用JS實現多選框select的全選與取消全選

你自己改下控制項名字就可以了啊！
下面自己放連個檔案試
---
1.php

<script>
function $(id){

return document.getElementById(id);

}

function checkalls(obj,form){

var bool=(obj.checked)?true:false;
for(var i=0;i<form.length;i++){
form.all[i].selected=bool;
}
}
</script>
<form action="2.php" method="post" >
<input type="checkbox" name="checkall" id="checkall" onclick="checkalls(this,$('select'))" checked>全選<br>
<select multiple name="select[]" id="select" size="15" style="width:210px;height:250px">
<option value="1" selected>頓飯大幅度</option>
<option value="2" selected>大幅度</option>
<option value="3" selected>大幅縮</option>
<option value="4" selected>到司法所</option>

</select>
<INPUT TYPE="submit" value="提交">
</form>

---
2.php

<?
echo $select[0];
echo $select[1];
echo $select[2];
echo $select[3];
?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

select 左右多選實現，select多選實現

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support