CODEWITHSUNDEEP
javascriptjquery
denis
denis

Reputation: 351

Add new list row based on drop down selection

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

Upvotes: 1

Views: 604

Answers (2)

David Thomas
David Thomas

Reputation: 253446

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:

Upvotes: 2

Anoop
Anoop

Reputation: 23208

Updated jsfiddle. I am using jQuery clone to create new option content . Note do not use id if you want to repeat same code multiple time.

Upvotes: 1

Related Questions