JQuery Multi Select With Two ListBox

2012-03-28

7419
0
jQuery

摘要:JQuery Multi Select With Two ListBox

The Project is Asp.net Framework 4.0 & MVC 3.0 架構

jQuery 的寫法如下:


<script type="text/javascript" language="javascript"> 
 $().ready(function () {
         $("input[name^='add']").click(function () {
             var id = $(this).attr('id').split('_');
             if (id[1] == 'all') {
                 $('#select1 option').remove().appendTo('#select2');
             } else {
                 $('#select1 option:selected').remove().appendTo('#select2');
             }
             var Mult_SelectListBox = $('#select2 option').map(function () { return $(this).val(); }).get().join(',');
             $("#Mult_SelectListBox").attr('value', Mult_SelectListBox);
             return false;
         });
         $("input[name^='remove']").click(function () {
             var id = $(this).attr('id').split('_');
             if (id[1] == 'all') {
                 $('#select2 option').remove().appendTo('#select1');
             } else {
                 $('#select2 option:selected').remove().appendTo('#select1');
             }
             var Mult_SelectListBox = $('#select2 option').map(function () { return $(this).val(); }).get().join(',');
             $("#Mult_SelectListBox").attr('value', Mult_SelectListBox);
             return false;
         });
     });  
 </script>

The Working Test Page 如下:

<html>  
<head>  
 <style type="text/css">  
  td.selectbox {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  }  
 </style>  
</head>  
<body> 
<table>
        <tr>
            <td class="selectbox">
                <select multiple id="select1">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                    <option value="7">Option 7</option>
                    <option value="8">Option 8</option>
                </select>
            </td>
            <td class="selectbox">
                <input type="button" id="add_all" name="add" value="&gt;&gt;" style="width: 60px" /><br />
                <input type="button" id="remove_all" name="remove" value="&lt;&lt;" style="width: 60px" /><br />
                <input type="button" id="add_one" name="add_one" value="&gt;" style="width: 60px" /><br />
                <input type="button" id="remove_one" name="remove_one" value="&lt;" style="width: 60px" /><br />
                <input type="hidden" id="Mult_SelectListBox" name="Mult_SelectListBox" value="" /><!—-Request hidden Value -->
            </td>
            <td class="selectbox">
                <select multiple id="select2">
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" onclick="submitQuery()" value="submit" />
            </td>
            <td>
            </td>
        </tr>
    </table>
</body>  
</html>

Get value to alert():


     function submitQuery() {
         var value = $("#Mult_SelectListBox").attr('value');
         alert("select2 Value: "+value);
     }

這是我參考別人的網站改寫的

注意重點(the Key-Point) :

1.重點(Key-Point)----------------- hidden value :

<input type="hidden" id="Mult_SelectListBox" name="Mult_SelectListBox" value="" /><!—-Request hidden Value -->

2.重點(Key-Point)----------------- Select2 option value use「，」串接 :


var Mult_SelectListBox = $('#select2 option').map(function () { return $(this).val(); }).get().join(',');
$("#Mult_SelectListBox").attr('value', Mult_SelectListBox);

參考網址:http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html

iverson huang 筆記

回首頁