jquery dynamic select box + clone row

Question

please help! I need use two jquery scripts - dynamic select box and clone row. Each of them work fine but I cannot find the way to use it together in one script. Thank you for any suggestion! Petr

//SCRIPT ADD ROW

$(function(){
            // start a counter for new row IDs
            // by setting it to the number
            // of existing rows
            var newRowNum = 0;

            // bind a click event to the "Add" link
            $('#addnew').click(function(){
                // increment the counter
                newRowNum += 1;

                // get the entire "Add" row --
                // "this" refers to the clicked element
                // and "parent" moves the selection up
                // to the parent node in the DOM
                var addRow = $(this).parent().parent();

                // copy the entire row from the DOM
                // with "clone"
                var newRow = addRow.clone();

                // set the values of the inputs
                // in the "Add" row to empty strings
                $('input', addRow).val('');

                // replace the HTML for the "Add" link 
                // with the new row number
                $('td:first-child', newRow).html(newRowNum);

                // insert a remove link in the last cell
                $('td:last-child', newRow).html('Remove');

                // loop through the inputs in the new row
                // and update the ID and name attributes
                $('input', newRow).each(function(i){
                    var newID = newRowNum + '_' + i;
                    $(this).attr('id',newID).attr('name',newID);
                });

                // insert the new row into the table
                // "before" the Add row
                addRow.before(newRow);

                // add the remove function to the new row
                $('a.remove', newRow).click(function(){
                    $(this).parent().parent().remove();
                    return false;               
                });

                // prevent the default click
                return false;
            });
        });

//SCRIPT SELECT BOX

function makeSublist(parent,child,isSubselectOptional,childVal)
{
    $("body").append("");
    $('.'+parent+child).html($("."+child+" option"));

    var parentValue = $('.'+parent).attr('value');
    $('.'+child).html($("."+parent+child+" .sub_"+parentValue).clone());

    childVal = (typeof childVal == "undefined")? "" : childVal ;
    $("."+child).val(childVal).attr('selected','selected');

    $('.'+parent).change(function(){
        var parentValue = $('.'+parent).attr('value');
        $('.'+child).html($("."+parent+child+" .sub_"+parentValue).clone());
        if(isSubselectOptional) $('.'+child).prepend(" -- Select -- ");
        $('.'+child).trigger("change");
        $('.'+child).focus();
    });
}

$(document).ready(function()
{
    makeSublist('child','grandsun', true, '');  
    makeSublist('parent','child', false, '1');  

        $("#selectListButton1").click(function(){
        alert( 'Value is: ' + $('.parent').val() );
    });
    $("#selectListButton2").click(function(){
        alert( 'Text is: ' + $('.child :selected').text() );
    }); 
});

Answer 1

It won't be exactly suited to your needs but you should be able to customise it pretty easily.

I just finished a project of my own where I was doing this but I wasn't aware there were two separate plugins to perform this functionality but you can see my code here:

http://jsfiddle.net/5ubTe/80/