Question

I am trying the following.

I have the function that displays a hidden list based on the dropdown selecttion.

Please visit here to see it:

http://jsfiddle.net/vSyK6/28/

What I am trying to do is when Option1 is selected, it will display the content of #List-Option1 Content and if Option2 is selected it will display content #List-Option2.

Now, what I want to accomplish is when both content is displayed and if you select again of the options it should add another list with the option selected.

Basically if we go by this order:

Option1….then
Option2….then

We select again Option1 and it should display like this

Option1 Content
Option2 Content
Option1 Content

if we select Option2 again it should display like this:

Option1 Content
Option2 Content
Option1 Content
Option2 Content

Right now what it does it displays the selected item in the last row of the list. It doesn’t add a new list row. This function of course is not implemented. I need the solution for that 🙂

Hope i make sense 🙂

Any help is appreciated

Answer 1

I’d suggest the following:

$('#List-Option1, #List-Option2').hide();

$('#category').change(function() {
    var str = $('#category').val();
    $('#List-' + str).clone(true, true).attr('id', function(i,v){
        return v.replace(/\d+/,'') + (parseInt($('#box li[id^="List-Option"]').length,10) + 1);
    }).appendTo('#box ul').show();
});​

JS Fiddle demo.

References:

• attr().
• attribute-starts-with (attribute^="value"]) selector.
• clone().
• parseInt().
• string.replace().