2013-05-09 72 views
0

我有选择下拉菜单和地方值的表如左图所示,以html:依赖其对应的表值填充选择选项

<table class="day-choices"> 
    <thead> 
     <tr> 
      <th>Time</th> 
      <th class="day-choices-pleft">Places Left</th> 
      <th class="day-choices-preq">Places Req.</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>10.30</td> 
      <td class="day-choices-pleft">6</td> 
      <td class="day-choices-preq"> 
       <select name="places-req[]" class="places-req"> 

       </select> 
      </td> 
     </tr> 
     <tr> 
      <td>11.30</td> 
      <td class="day-choices-pleft">8</td> 
      <td class="day-choices-preq"> 
       <select name="places-req[]" class="places-req"> 
        <option value="">0</option> 

       </select> 
      </td> 
     </tr> 
     <tr> 
      <td>12.30</td> 
      <td class="day-choices-pleft">10</td> 
      <td class="day-choices-preq"> 
       <select name="places-req[]" class="places-req"> 
        <option value="">0</option> 

       </select> 
      </td> 
     </tr> 
     <tr> 
      <td>13.30</td> 
      <td class="day-choices-pleft">5</td> 
      <td class="day-choices-preq"> 
       <select name="places-req[]" class="places-req"> 
        <option value="">0</option> 

       </select> 
      </td> 
     </tr> 
     <tr> 
      <td>14.30</td> 
      <td class="day-choices-pleft">6</td> 
      <td class="day-choices-preq"> 
       <select name="places-req[]" class="places-req"> 
        <option value="">0</option> 

       </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 

我希望做的是填充取决于选择的选项使用jquery的td.day-choices-pleft中的值。

例如,如果表中的行我有6个名额留给ID喜欢选择有6个选项(包括0选项):

<select name="places-req[]" class="places-req"> 
    <option value="">0</option> 
    <option value="">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
</select> 

回答

1
$('td.day-choices-pleft').each(function(){ 
    var val = parseInt($(this).text()); 
    var $select = $(this).next('td.day-choices-preq').find('select'); 
    $select.empty(); 
    for(var i = 0 ; i <= val ; i++){ 
    $select.append("<option value="+i+">"+i+"</option>"); 
    } 
});