下拉列表select 由左邊框移動(dòng)到右邊示例
更新時(shí)間:2013年12月04日 17:17:45 作者:
select由左邊框移動(dòng)到右邊,下面有個(gè)不錯(cuò)的示例,大家可以參考下
當(dāng)頁面還沒有加載完的時(shí)候調(diào)用下面語句,會(huì)取不到“add” 這個(gè)對(duì)象,提示為空或不是對(duì)象
document.getElementById("add").onclick = function(){
alert("hello");
}
當(dāng)使用便可取的對(duì)象
window.onload = function(){
document.getElementById("add").onclick = function(){
alert("hello");
}
}
<script type="text/javascript">
//選中的從左邊移到右邊
function toright() {
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的屬性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//全部移動(dòng)到右邊
function allright(){
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstoptionElement[0]);//option選項(xiàng)選中時(shí)候索引為0
}
}
//雙擊移動(dòng)到右邊
function db(){
/* //方法一
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的屬性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//方法二
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
secondElement.appendChild(firstElement[firstElement.selectedIndex]);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<table width="285" height="169" border="0" align="left">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1">選項(xiàng)1</option>
<option value="2">選項(xiàng)2</option>
<option value="3">選項(xiàng)3</option>
<option value="4">選項(xiàng)4</option>
<option value="5">選項(xiàng)5</option>
<option value="6">選項(xiàng)6</option>
</select>
</td>
<td width="69" valign="middle">
<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value="選項(xiàng)8">選項(xiàng)8</option>
</select>
</td>
</tr>
</table>
</body>
復(fù)制代碼 代碼如下:
document.getElementById("add").onclick = function(){
alert("hello");
}
當(dāng)使用便可取的對(duì)象
復(fù)制代碼 代碼如下:
window.onload = function(){
document.getElementById("add").onclick = function(){
alert("hello");
}
}
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//選中的從左邊移到右邊
function toright() {
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的屬性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//全部移動(dòng)到右邊
function allright(){
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstoptionElement[0]);//option選項(xiàng)選中時(shí)候索引為0
}
}
//雙擊移動(dòng)到右邊
function db(){
/* //方法一
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的屬性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//方法二
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
secondElement.appendChild(firstElement[firstElement.selectedIndex]);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<table width="285" height="169" border="0" align="left">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1">選項(xiàng)1</option>
<option value="2">選項(xiàng)2</option>
<option value="3">選項(xiàng)3</option>
<option value="4">選項(xiàng)4</option>
<option value="5">選項(xiàng)5</option>
<option value="6">選項(xiàng)6</option>
</select>
</td>
<td width="69" valign="middle">
<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value="選項(xiàng)8">選項(xiàng)8</option>
</select>
</td>
</tr>
</table>
</body>
您可能感興趣的文章:
- JavaScript Select和Option列表元素上下左右移動(dòng)
- javascript select控件間內(nèi)容互相移動(dòng)
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jQuery操作Select的Option上下移動(dòng)及移除添加等等
- 兩個(gè)select多選模式的選項(xiàng)相互移動(dòng)(示例代碼)
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
相關(guān)文章
JavaScript之Blob對(duì)象類型的具體使用方法
這篇文章主要介紹了JavaScript之Blob對(duì)象類型的具體使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹,關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04
Bootstrap企業(yè)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目4
這篇文章主要為大家分享了Bootstrap企業(yè)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
Vue項(xiàng)目vscode 安裝eslint插件的方法(代碼自動(dòng)修復(fù))
這篇文章主要介紹了Vue項(xiàng)目vscode 安裝eslint插件的方法 代碼自動(dòng)修復(fù),需要的朋友可以參考下2020-04-04

