将JQuery数组传递给嵌套函数

Question

I'm having problems with dynamically adding a row to a table using data stored in two arrays ( categories and treatments ). The arrays are fine, I've determined that.

When passing just the categories array the new row displays but the select box reads [object:object], it's clearly blank.

When I pass a second array with it, as shown below, the console reads 'undefined is not a function'.

Any help would be hugely appreciated!

 // Add an extra row when button is clicked
 var counter = 1;
   $('input.add').click(categories, treatments, function(){
      counter++;      

      var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';      

      $.each(categories, function(key, value) {   
      $('#category' + counter)
         newRow += '<option value ="' + key + '">' + value + '</option>';
      });

      newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';

      $.each(treatments, function(key, value) {   
      $('#treatment' + counter)
         newRow += '<option value ="' + key + '">' + value + '</option>';
      });    

      newRow += '</select></td></tr>';     

      $('table.treatments').append(newRow);
   });
});

Answer 1

The first parameter for the jQuery .click() is an Object, and you're trying to pass two arrays.

This should work for you (remember to check for the missing semi-colons):

// Create an Object obj containing the two arrays.
$('input.add').click(obj = { categories: categories, treatments: treatments }, function () {
    counter++;

    var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';

    // Use the obj.
    $.each(obj.categories, function (key, value) {
        $('#category' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });

    newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';

    // Use the obj.
    $.each(obj.treatments, function (key, value) {
        $('#treatment' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });

    newRow += '</select></td></tr>';

    $('table.treatments').append(newRow);
});

Demo

jQuery .click()