ตัวอย่างการย้ายรายการแบบเลื่อนลง ให้เลือกจากขอบด้านซ้ายไปทางขวา

เมื่อมีการเรียกคำสั่งต่อไปนี้เมื่อไม่ได้โหลดเพจ ไม่สามารถรับวัตถุ "เพิ่ม" และพร้อมท์ว่างเปล่าหรือไม่ใช่วัตถุ

คัดลอกรหัสรหัสดังต่อไปนี้:

document.getElementById("เพิ่ม").onclick = function(){

alert("สวัสดี");

-

วัตถุที่มีอยู่เมื่อใช้

คัดลอกรหัสรหัสดังต่อไปนี้:

window.onload = ฟังก์ชั่น () {

document.getElementById("เพิ่ม").onclick = function(){

alert("สวัสดี");

-

-

คัดลอกรหัสรหัสดังต่อไปนี้:

<script type="text/javascript">

//รายการที่เลือกจะย้ายจากซ้ายไปขวา

ฟังก์ชั่น toright() {

var firstElement = document.getElementById("ครั้งแรก");

var SecondElement = document.getElementById("วินาที");

var firstoptionElement = firstElement.getElementsByTagName("ตัวเลือก");

var len = firstoptionElement.length;

สำหรับ(var i=0;i<len;i++){

if(firstElement.selectedIndex != -1){/ //selectedIndex เป็นคุณสมบัติของ select

SecondElement.appendChild (firstoptionElement [firstElement.selectedIndex]);

-

-

-

//เลื่อนทั้งหมดไปทางขวา

ฟังก์ชั่นทั้งหมด () {

var firstElement = document.getElementById("ครั้งแรก");

var SecondElement = document.getElementById("วินาที");

var firstoptionElement = firstElement.getElementsByTagName("ตัวเลือก");

var len = firstoptionElement.length;

สำหรับ(var i=0;i<len;i++){

SecondElement.appendChild(firstoptionElement[0]);//เมื่อเลือกตัวเลือกตัวเลือก ดัชนีจะเป็น 0

-

-

//ดับเบิลคลิกเพื่อเลื่อนไปทางขวา

ฟังก์ชั่น db(){

/* //วิธีที่ 1

var firstElement = document.getElementById("ครั้งแรก");

var SecondElement = document.getElementById("วินาที");

var firstoptionElement = firstElement.getElementsByTagName("ตัวเลือก");

var len = firstoptionElement.length;

สำหรับ(var i=0;i<len;i++){

if(firstElement.selectedIndex != -1){/ //selectedIndex เป็นคุณสมบัติของ select

SecondElement.appendChild (firstoptionElement [firstElement.selectedIndex]);

-

-

//วิธีที่ 2

var firstElement = document.getElementById("ครั้งแรก");

var SecondElement = document.getElementById("วินาที");

SecondElement.appendChild(firstElement[firstElement.selectedIndex]);

-

</สคริปต์>

<style type="text/css">

</สไตล์>

</หัว>

<ร่างกาย>

<ตาราง align="ซ้าย">

<tr>

<td>

<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">

<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>

</เลือก>

</td>

<td 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 align="ซ้าย">

<select name="second" size="10" multiple="multiple" id="second">

<option value="ตัวเลือก 8">ตัวเลือก 8</option>

</เลือก>

</td>

</tr>

</ตาราง>

</ร่างกาย>