如何设置内部存在的选择控件的ID和名称 <td> 使用jQuery的HTML表？

Question

I've following HTML code for table and select control:

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr id="jumbo">
      <th style="vertical-align:middle">Products</th>
      <th style="vertical-align:middle">Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1_1">
      <td>
        <div class="btn-group">
          <select name="" id="" class="form-control prod_list">
            <option value='1'>Alabama</option>
            <option value='2'>Alaska</option>
            <option value='3'>Arizona</option>
            <option value='4'>Arkansas</option>
            <option value='5'>California</option>
           </select>
         </div>
       </td>
     </tr>
   </tbody>
 </table>

Now I want to set the name and id of select control from above HTML code to following values:

name="product_id_1[1]"
id="product_id_1_1"

How to achieve this?

Answer 1

You can use .attr() to set attributes id and name for select.try this

 $('td select').attr('name','product_id_1[1]');
 $('td select').attr('id','product_id_1_1');

Working Fiddle

Update: To target first select element:

 $('td select:eq(0)').attr('id','product_id_1_1');

Answer 2

if you don't want to be specific and that is the only select on the page, $('select').attr('name','product_id_1[1]').attr('id','product_id_1_1'); will suffice.

If you need to be more specific:

$('table#blacklistgrid_1 tbody.apnd-test div.btn-group')
  .attr('name','product_id_1[1]')
  .attr('id','product_id_1_1');

should be good.

the name and id properties can be set using .attr() . Other than that it just depends how specific you want to be when finding the select element.