JQuery Move Selected items from Select Box


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. function toggleChecked(status,mode) {
  2.  
  3. $("div#" + mode + "_selected_emails INPUT[type='checkbox']").each( function() {
  4. $(this).attr("checked",status);
  5. var obj_id = $(this).val();
  6. var photo = $('#'+mode+'_img_'+obj_id).attr('src');
  7. var name = $('#'+mode+'_name_'+obj_id).html();
  8. var uname = $('#'+mode+'_uname_'+obj_id).val();
  9. var email = $('#'+mode+'_email_'+obj_id).val();
  10. var user_id = $('#'+mode+'_id_'+obj_id).val();
  11.  
  12. var ids = $('[id='+mode+'_selected_'+obj_id+']');
  13. if(status == true)
  14. {
  15. if(ids.length==0)
  16. {
  17. var content = '<div style=" border-bottom:1px solid #CCCCCC;float:left;padding:5px;width:97%;" id="'+mode+'_selected_'+obj_id+'"><div style="width:10%; float:left; padding-top:5px;cursor:pointer;" onClick="$(\'#'+mode+'_selected_'+obj_id+'\').remove();$(\'#'+mode+'_list_'+obj_id+'\').attr(\'checked\',false);"><img src="images/default/community/delete-icon.jpg"></div><div style="width:10%; float:left"><a href="#"><img src="'+photo+'"></a></div><div style="width:80%; float:left; padding-top:5px;font-weight:bold;">'+name+'<input name="email[]" type="hidden" value="'+email+'"/><input name="user_id[]" type="hidden" value="'+user_id+'"/><input name="name[]" type="hidden" value="'+uname+'"/></div></div>';
  18. $(content).appendTo('#'+mode+'_selected_email_container');
  19. }
  20. }
  21. else
  22. {
  23. $('#'+mode+'_selected_'+obj_id).remove();
  24. }
  25. })
  26. }
  27. function addSelected(obj,mode)
  28. {
  29. var obj_id = obj.value;
  30. var photo = $('#'+mode+'_img_'+obj_id).attr('src');
  31. var name = $('#'+mode+'_name_'+obj_id).html();
  32. var uname = $('#'+mode+'_uname_'+obj_id).val();
  33. var email = $('#'+mode+'_email_'+obj_id).val();
  34. var user_id = $('#'+mode+'_id_'+obj_id).val();
  35.  
  36. if(obj.checked == true)
  37. {
  38. var content = '<div style=" border-bottom:1px solid #CCCCCC;float:left;padding:5px;width:97%;" id="'+mode+'_selected_'+obj_id+'"><div style="width:10%; float:left; padding-top:5px;cursor:pointer;" onClick="$(\'#'+mode+'_selected_'+obj_id+'\').remove();$(\'#'+mode+'_list_'+obj_id+'\').attr(\'checked\',false);"><img src="images/default/community/delete-icon.jpg"></div><div style="width:10%; float:left"><a href="#"><img src="'+photo+'"></a></div><div style="width:80%; float:left; padding-top:5px;font-weight:bold;">'+name+'<input name="email[]" type="hidden" value="'+email+'"/><input name="user_id[]" type="hidden" value="'+user_id+'"/><input name="name[]" type="hidden" value="'+uname+'"/></div></div>';
  39. $(content).appendTo('#'+mode+'_selected_email_container');
  40. }
  41. else
  42. {
  43. $('#'+mode+'_selected_'+obj_id).remove();
  44. }
  45.  
  46. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.