| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>SelectList</title> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | |
|---|
| 7 | </style> |
|---|
| 8 | </head> |
|---|
| 9 | <body> |
|---|
| 10 | <select id="dropdown1"> |
|---|
| 11 | <option data-blogid="11" data-url="http://www.one.com/">one.com</option> |
|---|
| 12 | <option data-blogid="12" data-url="http://www.two.com/">two.com</option> |
|---|
| 13 | <option data-blogid="13" data-url="http://www.three.com/">three.com</option> |
|---|
| 14 | <option data-blogid="14" data-url="http://www.four.com/">four.com</option> |
|---|
| 15 | <option data-blogid="15" data-url="http://www.five.com/">five.com</option> |
|---|
| 16 | <option data-blogid="16" data-url="http://www.six.com/">six.com</option> |
|---|
| 17 | <option data-blogid="17" data-url="http://www.seven.com/">seven.com</option> |
|---|
| 18 | <option data-blogid="18" data-url="http://www.eight.com/">eight.com</option> |
|---|
| 19 | <option data-blogid="19" data-url="http://www.nine.com/">nine.com</option> |
|---|
| 20 | <option data-blogid="20" data-url="http://www.ten.com/">ten.com</option> |
|---|
| 21 | </select> |
|---|
| 22 | <a href="#" id="add">>></a> |
|---|
| 23 | <ul id="list1"> |
|---|
| 24 | |
|---|
| 25 | </ul> |
|---|
| 26 | <script type="text/javascript" src="jquery.js"></script> |
|---|
| 27 | <script type="text/javascript"> |
|---|
| 28 | (function($) { |
|---|
| 29 | |
|---|
| 30 | // Set attr labels, get dropdown, get list and get add link. |
|---|
| 31 | var blogid_attr = 'data-blogid', |
|---|
| 32 | url_attr = 'data-url', |
|---|
| 33 | dropdown = $('#dropdown1'), |
|---|
| 34 | list = $('#list1'), |
|---|
| 35 | add = $('#add'); |
|---|
| 36 | |
|---|
| 37 | // Delegate click on remove links. |
|---|
| 38 | $('#list1 .remove-link').live('click', function(e) { |
|---|
| 39 | e.preventDefault(); |
|---|
| 40 | |
|---|
| 41 | // Get blogid, url; create option and set attr's. |
|---|
| 42 | var self = $(this), |
|---|
| 43 | parent = self.parent('li'), |
|---|
| 44 | blogid = parent.find('input[name=blogid]').attr('value'), |
|---|
| 45 | url = parent.find('input[name=url]').attr('value'), |
|---|
| 46 | |
|---|
| 47 | option = $('<option />') |
|---|
| 48 | .attr(blogid_attr, blogid) |
|---|
| 49 | .attr(url_attr, url) |
|---|
| 50 | .appendTo(dropdown); |
|---|
| 51 | |
|---|
| 52 | // Remove link before setting option text |
|---|
| 53 | self.remove(); |
|---|
| 54 | option.text(parent.text()); |
|---|
| 55 | |
|---|
| 56 | // Remove list item. |
|---|
| 57 | parent.remove(); |
|---|
| 58 | |
|---|
| 59 | // Clone items, sort them alphabetically and append to the dropdown. |
|---|
| 60 | var items = dropdown.find('option').clone(); |
|---|
| 61 | items.sort(function(a, b) { |
|---|
| 62 | var x = a.innerHTML.toLowerCase(); |
|---|
| 63 | var y = b.innerHTML.toLowerCase(); |
|---|
| 64 | return ((x < y) ? -1 : ((x > y) ? 1 : 0)); |
|---|
| 65 | }).appendTo(dropdown.empty()); |
|---|
| 66 | }); |
|---|
| 67 | |
|---|
| 68 | // Delegate click on add link. |
|---|
| 69 | $('#add').live('click', function(e) { |
|---|
| 70 | e.preventDefault(); |
|---|
| 71 | |
|---|
| 72 | // Get blogid, url; create list item and set hidden values. |
|---|
| 73 | var selected = dropdown.children(':selected'), |
|---|
| 74 | blogid = selected.attr(blogid_attr), |
|---|
| 75 | url = selected.attr(url_attr), |
|---|
| 76 | |
|---|
| 77 | li = $('<li />') |
|---|
| 78 | .appendTo(list) |
|---|
| 79 | .text(selected.text()), |
|---|
| 80 | |
|---|
| 81 | blogid_hidden = $('<input />') |
|---|
| 82 | .attr('type', 'hidden') |
|---|
| 83 | .attr('name', 'blogid') |
|---|
| 84 | .appendTo(li) |
|---|
| 85 | .attr('value', blogid), |
|---|
| 86 | |
|---|
| 87 | url_hidden = $('<input />') |
|---|
| 88 | .attr('type', 'hidden') |
|---|
| 89 | .attr('name', 'url') |
|---|
| 90 | .appendTo(li) |
|---|
| 91 | .attr('value', url), |
|---|
| 92 | |
|---|
| 93 | remove_link = $('<a />') |
|---|
| 94 | .attr('href', '#') |
|---|
| 95 | .addClass('remove-link') |
|---|
| 96 | .appendTo(li) |
|---|
| 97 | .text('remove'); |
|---|
| 98 | |
|---|
| 99 | // Remove dropdown option. |
|---|
| 100 | selected.remove(); |
|---|
| 101 | }); |
|---|
| 102 | |
|---|
| 103 | })(jQuery); |
|---|
| 104 | </script> |
|---|
| 105 | </body> |
|---|
| 106 | </html> |
|---|
