Jquery

Di chuyển Item từ list box này sang list box khác dùng jquery .

Đầu tiên ta tạo 1 trang index.php với nội dung chứa 2 listbox .

<table cellpadding="5" cellspacing="5">
<tbody>
<tr>
  <td colspan="2">
   <select id="from_select_list" multiple="multiple" name="from_select_list">
        <option value="apple">Apple</option>
        <option value="mango">Mango</option> 
        <option value="bannana">Bannana</option> 
        <option value="grapes">Grapes</option>
   </select>
  </td>

  <td colspan="2">
    <select id="to_select_list" multiple="multiple" name="to_select_list">
       <option value="winder">Winter</option> 
       <option value="summer">Summer</option> 
       <option value="rainy">Rainy</option> 
       <option value="Spring">Spring</option>
   </select>
   </td>
 </tr>
 <tr>
   <td>
      <input id="moveright" type="button" value="Move Right" 
      onclick="move_list_items('from_select_list','to_select_list');" />
   </td>

   <td>
      <input id="moverightall" type="button" value="Move Right All" 
      onclick="move_list_items_all('from_select_list','to_select_list');" />
   </td>

   <td>
      <input id="moveleft" type="button" value="Move Left" 
      onclick="move_list_items('to_select_list','from_select_list');" />
   </td>

   <td>
       <input id="moveleftall" type="button" value="Move Left All" 
       onclick="move_list_items_all('to_select_list','from_select_list');" />
   </td>
 </tr>
</tbody>
</table>

Và tiếp theo bạn chèn thêm đoạn jquery này vào :

function move_list_items(sourceid, destinationid)
{
$("#"+sourceid+"  option:selected").appendTo("#"+destinationid);
}
//this will move all selected items from source list to destination list
function move_list_items_all(sourceid, destinationid)
{
$("#"+sourceid+" option").appendTo("#"+destinationid);
}
</script>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s