javascript - jquery动态选择框+克隆行

Question

请帮忙!我需要使用两个 jquery 脚本 - 动态选择框和克隆行。它们每个都工作正常，但我找不到在一个脚本中一起使用它们的方法。谢谢您的任何建议!佩特

//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

它不会完全满足您的需求，但您应该能够非常轻松地对其进行自定义。

我刚刚完成了自己的一个项目，我正在做这个，但我不知道有两个单独的插件来执行此功能，但您可以在这里看到我的代码:

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