Geek Answers Handbook

Create a comma separated list of clicked items using jquery

I am trying to insert a comma-separated list into the DOM, which the user can copy and paste into another application. Right now, I'm completely fixated on how to handle the first element, which is not preceded by a comma.

Now the user clicks on the element, and jquery captures the identifier of the element to create a list. The user should be able to turn their selections on and off. I also need a list that should be generated in the order in which the user selects the items.

HTML

Comma separated list here: <span id="list"></span> <br /> <a id="1" class="clickme" href="#"><li>One</li></a> <a id="2" class="clickme" href="#"><li>Two</li></a> <a id="3" class="clickme" href="#"><li>Three</li></a> <a id="4" class="clickme" href="#"><li>Four</li></a> <a id="5" class="clickme" href="#"><li>Five</li></a> <a id="6" class="clickme" href="#"><li>Six</li></a>

CSS

 .selected { background-color: #99CCFF; }

JS-jquery loaded

 $('.clickme').click(function (e) { e.preventDefault(); var book_id = $(this).attr('id'); $(this).children('li').toggleClass("selected"); var list_container = $("#list"); if ($(this).children('li').is(".selected")) { if (list_container.text().length > 0) { list_container.append("," + book_id); } else { list_container.append(book_id); } } else { list_container.text(list_container.text().replace("," + book_id, "")); } });

This works great to create a comma separated list, and it works great to disable everything except the first value in the list. The problem is that the first value was inserted without the preceding comma, and therefore the replace function cannot match it. If I remove the comma from the replace function, I will be left with a bunch of unnecessary commas. If I match both, then I risk matching part of the identifier ... i.e. Replace 3 with 13 when 3 switches.

I tried a lot of variations and can not find anything that works.

My only solution, which gave the desired result, was to use CSS to enter commas and wrap the entered identifiers with a span element.

CSS TRICK

 #list span { display: inline; } #list span:after { content: ","; } #list span:last-child:after { content: ""; }

Worked perfectly ... except for the actual purpose of this. I need so that users can copy and paste the generated string. When you use CSS to create content, most browsers don’t see this in the DOM-level clipboard. IE copied the string as you see it in the browser, FF and Safari copied the string without added CSS commas.

Fiddle is HERE

+4
source share
2 answers

It seems you are dealing with this problem. Just create an array of the selected book IDs, then use .join(',') to display them as a comma-separated list.

 $('.clickme').click(function (e) { e.preventDefault(); $(this).children('li').toggleClass("selected"); var list_container = $("#list"); var book_ids = $('.clickme:has(li.selected)').map(function(){ return this.id; }).get(); list_container.text(book_ids.join(',')); });

DEMO: http://jsfiddle.net/rYu6m/2/

EDIT: You say you want to save the elements in the order in which they were clicked. In this case, you need to declare the array outside the click handler, then either the .push element on it or .splice it. It is much easier to work with arrays than work with strings.

 var book_ids = []; $('.clickme').click(function (e) { e.preventDefault(); $(this).children('li').toggleClass("selected"); var list_container = $("#list"); var index = $.inArray(this.id, book_ids); if(index === -1){ // Not in array, add it book_ids.push(this.id); } else{ // In the array, remove it book_ids.splice(index, 1); } list_container.text(book_ids.join(',')); });

DEMO: http://jsfiddle.net/rYu6m/4/

+5
source

The Rocket Hazmat solution is very similar and probably better, but I will post it anyway:

 $('.clickme').click(function (e) { e.preventDefault(); $(this).toggleClass('selected'); var l = []; $('.selected').each(function(){ l.push($(this).attr('id')); }); $('#list').text(l.join(',')); });

http://jsfiddle.net/rYu6m/3/

+2
source

More articles:


All Articles