Why I'm getting the error "Error: Syntax error, unrecognized expression: unsupported pseudo: select"?

Question

I've following jQuery code:

    $(document).ready(function() {
    $('.products').click(function () {
      var table_id = $(this).closest('table').attr('id');            
      var no = table_id.match(/\d+/)[0];            
      var first_row = $(this).closest('table').find('tbody tr:first').attr('id');    
      var new_row = $('#'+first_row).clone();
      var tbody = $('tbody', '#'+table_id);
      var n = $('tr', tbody).length  + 1;
      new_row.attr('id', 'reb' + no +'_'+ n);

      $(':input', new_row).not('.prod_list').remove();
      $(':select', new_row).attr('name','product_id_'+no+'['+n+']');
      $(':select', new_row).attr('id','product_id_'+no+'_'+n);
      $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
      tbody.append(new_row);
      $('.delete').on('click', deleteRow);
     });
   });

Using above code I'm appending a new to the HTML table. But this row is containing only select control. So I'm setting the values of id and name to that select control using above code. During this I got Syntax error as follows in firebug console:

"Error: Syntax error, unrecognized expression: unsupported pseudo: select"

If I remove the above two lines I wrote to set the id and name values to select control, other code works absolutely fine without any issue. So can some one please fix this issue and allow me to set the id and value of newly created row's select control? Thanks

Answer 1

There is no selector called :select, just select(element selector) will do - you might have tried it because of the pseudo selector :input which is a special selector that will select all input, select and textarea elements

$('select', new_row)

Answer 2

":" character only work in pseudo selectors like

 $('tr:nth-child')