使用jquery使用选择下拉列表填充多个列

时间:2013-04-17 17:01:53

标签: jquery

最初创建表时,此表的第一行包含select块中的类别列表,该列表使用底部显示的jquery填充。

<tr>
<td align="center">
<span id="catDisplay">
<select id="field1" name="field1">
   <option value="">--select--</option>
   <option value="27">$5.00 off (CAT 27)</option>
   <option value="52">$5.00 off Skip (CAT 52)</option>
</select>
</span>
</td>
<td align="left">
<button id="keywordAdd">+</button>
</td>
</tr>

使用.insertafter()添加第二行。但它似乎没有触发相同的jquery。

<tr>
<td align="center">
<span id="catDisplay2">&nbsp;</span>
</td>
<td>
<span id="prodDisplay2">&nbsp;</span>
</td>
<td align="left">
<button id="keywordAdd">+</button>
<button id="keywordDelete">-</button>
</td>
</tr>

这是jquery:

$('span').each(function(){
  if ($(this).attr('id').match(/catDisplay/)) {
     $(this).load(
    'free_gift_backend.php',
    {   
      query       : "getAllCats"
    });  
  }
});

我也试过

$("span[id^=catDisplay]").load(
'free_gift_backend.php',
{ 
  query       : "getAllCats"
},
function(response, status, xhr) { 
   if (status != "error") { 
     $('#field1')
       .change(changeCat);
   }
}); 

这也行不通。我做错了什么?

这是行添加逻辑:

$("#keywordAdd").live("click", function(event) {
   event.preventDefault();
   var  rowCount = $("#keywordTable tbody>tr").length + 1;
   // this should be the rowCount, but if someone has added 
   // after deleting from the middle, it will need to be changed.
   while ($("#catDisplay" + rowCount).exists()) {
       rowCount = rowCount + 1;
   }
   var  html = keywordRow(rowCount);
   $(html).insertAfter('#keywordTable tbody>tr:last');
   // $("#keywordTable tbody>tr #catDisplay" + rowCount).focus();
   var $newrow = $("#keywordTable tbody>tr #catDisplay" + rowCount);
   $newrow.focus();
   $newrow.load(
    'free_gift_backend.php',
    {
      query       : "getAllCats",
      rowCount :    rowCount
    } ,
    function(response, status, xhr) {
       if (status != "error") {
         $(this).children(0)
           .change(changeCat);
       }
    } );
  });

1 个答案:

答案 0 :(得分:0)

将“.load()”调用放在创建新行的“.live()”调用中似乎是解决我的问题的方法。我曾经认为span.each调用会起作用,但我想这对动态添加的行(?)不起作用。

 $newrow.load(
        'free_gift_backend.php',
        {
          query       : "getAllCats",
          rowCount :    rowCount
        } ,
        function(response, status, xhr) {
           if (status != "error") {
             $(this).children(0)
               .change(changeCat);
           }
        } );
      });