2009-12-26 152 views
1

请大家帮忙! 我需要使用两个jQuery脚本 - 动态选择框和克隆行。 他们每个人都很好,但我找不到在一个脚本中一起使用它的方式。 谢谢你的任何建议!彼得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()); 
    }); 
}); 
+2

你可以在http://jsbin.com上发布代码的演示页面? – 2009-12-26 11:29:00

+0

PLZ添加您的HTML – ezmilhouse 2011-04-18 08:23:24

回答

0

它不会完全适合您的需求,但你应该能够很容易地定制它。

我刚刚完成我自己的一个项目,我这样做,但在那里我不知道有两个独立的插件来执行此功能,但你可以在这里看到我的代码:

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