title: jquery dynamic select box + clone row
body: <p>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</p>
  
  <pre><code>
  //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() );
      }); 
  });
  </code></pre>