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> |
---|