Chuyển đổi phần tử của 2 thẻ Select Multiple
RUN
<!DOCTYPE html> <html> <head> <title>Select Multiple</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> select{ padding: 10px; width: 200px; height: 200px; } select option{ padding: 5px; } </style> </head> <body> <h2>Ví dụ được biên soạn tại freetuts.net</h2> <h3>Chọn các chuyên mục từ danh sách dưới đây</h3> <select multiple id="left"> <option value="tin công nghệ">Tin công nghệ</option> <option value="tin thời sự">Tin thời sự</option> <option value="tin quốc tế">Tin quốc tế</option> <option value="tin thể thao">Tin thể thao</option> <option value="tin nông nghiệp">Tin nông nghiệp</option> </select> <input type="button" id="left_to_right" value="<<" onclick="left_to_right(1)"/> <input type="button" id="right_to_left" value=">>" onclick="left_to_right(2)"/> <select multiple id="right"> </select> <script language="javascript"> // Hàm xử lý khi click vào 2 button function left_to_right(type) { if (type === 1) { var left = document.getElementById("right"); var right = document.getElementById("left"); } else { var left = document.getElementById("left"); var right = document.getElementById("right"); } selectCategory(left, right); } // Hàm chuyển các phần tử từ left sang right function selectCategory(left, right) { var options = left.children; // Lấy tất cả những options selected từ left var tmp = []; for (var i = 0; i < options.length; i++){ if (options[i].selected){ tmp.push(options[i]); } } // Đưa option selected qua right for (var i = 0; i < tmp.length; i++){ right.appendChild(tmp[i]); } } </script> </body> </html>
PHÓNG TO