1 
<html>    
<head>
<script language="javascript"> 
$(function(){
//For Moving Up..
    $("#button Up").click(function(){
    $("#listbox > option:selected").each(function(){
    var listItem = $(this);
    var listItemPosition = $("#listbox option").index(listItem) + 1;
        if (listItemPosition == 1) return false;
        listItem.insertBefore(listItem.prev());
  });
});
//For Moving Down..
    $("#button Down").click(function(){
    var itemsCount = $("#listbox option").length;
    $($("#listbox option:selected").get().reverse()).each(function() {
    var listItem = $(this);
    var listItemPosition = $("#listbox option").index(listItem) + 1;
    if (listItemPosition == itemsCount) return false;
    listItem.insertAfter(listItem.next());
   });
});
//For Moving right..
    $("#button1").click(function(){
        $("#list1 >> option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });
//For Moving Left..
    $("#button2").click(function(){
        $("#list2 << option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});
</script>
</head>
<body>
<div>
    <h3>List A</h3>
    <select id="list1" multiple="multiple" rows=2>
       <option value=1>Chennai</option>
         <option value=2>Bangalore</option>
        <option value=3>Kolkata</option>
     <option value=4>Pune</option>
    </select>
    <br/>
    <input id="button1" type="button" value=">>" />
        <input id="button Up" type="button" value="Move Up" />
   <input id="button Down" type="button" value="Move Down" />

</div>
<div>
    <h3>List B</h3>
    <select id="list2" multiple="multiple" rows=2>   
       <option value=1>Jackfruit</option>
         <option value=2>Papaya</option>
        <option value=3>Water Melon</option>
     <option value=4>Banana</option>
    </select>
    <br/>
    <input id="button2" type="button" value="<<" />
</div>


</body>
</html>

需要帮助以将所有功能实现为单独的功能。

4

1 回答 1

1

如下所示定义您在文档外准备好的函数。

<!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=iso-8859-1">
<title>ListBox</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function ReorderFields(actionType, listBoxCtrl) {
            if (actionType == 'up') {
                ListBoxMoveUp(listBoxCtrl);
            }
            else if (actionType == 'down') {
                ListBoxMoveDown(listBoxCtrl);
            }
        }

        function ListBoxMoveDown(ctrl) {
            var selectedDx = $("#" + ctrl).find("option:selected");
            var next = selectedDx.last().next();

            selectedDx.each(function() {
                $(this).insertAfter(next);
            });
        }

        function ListBoxMoveUp(ctrl) {
            var selectedDx = $("#" + ctrl).find("option:selected");
            var prev = selectedDx.first().prev();

            selectedDx.each(function() {
                $(this).insertBefore(prev);
            });
        }
$(document).ready(function(){
//jQuery Function works on click of the different Buttons


  //For Moving right..
  $("#datepickerImage").click(function(){
        $("#list1  option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });
//For Moving Left..
    $("#button2").click(function(){
        $("#list2  option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
//The function Ends up here..
    });
</script>
</head>
<body>
//The first List Box
<div>
    <select id="lstFields" name="lstFields" style="width: 88px">
     <option value=1>America</option>
     <option value=2>London</option>
     <option value=3>Singapore</option>
     <option value=4>Malaysia</option>
     </select>
    <br/>
    <input type="button" value="Up" onclick="ReorderFields('up', 'lstFields');return false;" />
    <input type="button" value="Down" onclick="ReorderFields('down', 'lstFields');return false;" />
</div>
//The second List Box
    <div>
    <h3>List A</h3>
    <select id="list1" style="width: 88px">
       <option value=1>Chennai</option>
         <option value=2>Bangalore</option>
        <option value=3>Kolkata</option>
     <option value=4>Pune</option>
    </select>
    <br/>

</div>
//The Third List Box
<div>
    <h3>List B</h3>
    <select id="list2" style="width: 88px">   
       <option value=1>Jackfruit</option>
         <option value=2>Papaya</option>
        <option value=3>Water Melon</option>
     <option value=4>Banana</option>
    </select>
    <br/>
    <input id="button2" type="button" value="<<" />
</div>

</body>
</html>

值正在正确交换您的代码正在工作只需要在准备好的文档之外定义。

于 2013-01-08T12:09:58.290 回答