Bug Tracker

Ticket #4885: index.html

File index.html, 3.1 KB (added by sixtymonkey, 11 years ago)

working version - replace .attr('value'... with .value(

Line 
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">&gt;&gt;</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>