刷新附加行中的选定选项

Question

我不知道如何为这个问题给出正确的标题，如果这让大家感到困惑，那么抱歉。

首先，我有一个在表格中追加一行的功能。每行都会有一个下拉列表（选择标签），其中包含我从数据库中检索的一些选项。为了生成下拉菜单，我有一个 get() 函数，当页面加载时，我会得到一个 php 文件的输出，以显示下拉菜单，其中包含来自我的数据库的数据。我把它放在<div align=center class='finish'></div> 里面。从默认情况来看，已经有 3 行格式相同，所以我需要从头开始 get()。但问题是我想在新的附加行中设置下拉列表而不刷新其他现有的下拉列表。逻辑是，当我已经从现有下拉列表中选择了一些选项时，然后我想添加新行，我不想刷新已经选择的下拉列表。

get() 用于下拉功能：

$.get("getfinishlist.php", function(item) {
  $('.finish').html(item);
});

追加行的addrow表函数：

function addrow_table() { //#p_rows is the tbody of the table
  $('#p_rows').append("<tr><td><div align=center><input type='text' size='5' class='section' name='section[]' style='font-size:11px'></div></td>"
  +"<td><div class='desc' style='font-size:11px;'></div></td>"
  +"<td><div align=center class='finish'></div><input type='hidden' class='hfinish'></td>"
  +"<td><div align=center><input type='text' size='5' name='hrd[]' style='font-size:11px'></div></td>"
  +"<td><div align=center><input type='text' size='9' name='length[]' class='length' style='font-size:11px'></div></td>"
  +"<td><div align=center><input type='text' size='4' class='pc' name='pc[]' style='font-size:11px'></div></td>"
  +"<td><div align=center class='kg'>0</div><input type='hidden' class='hkg' name='kg[]'></td>"
  +"<td><div align=center class='price'>0</div><input type='hidden' class='hprice' name='price[]'></td>"
  +"<td><div align=center class='amount'>0</div><input type='hidden' class='hamount' name='amount[]'></td>"
  +"<td><input type='hidden' style='font-size:11px'>"
  +"<div align='center'>"
  +"<a href='#' id='delrow' style='text-decoration:none;'>"
  +"<div style='border:1px solid #a1a1a1;"
  +"background:#dddddd;"
  +"width:30px;"
  +"border-radius:5px;'>"
  +"X"
  +"</div></a></div></td>"
  +"</tr>");

  $.get("getfinishlist.php", function(item) { //I know this is wrong because every time I start the function, every dropdown refreshed
    $('.finish').html(item);
  });

  return false;
}

$('#addrow').click(function() { //#addrow is a div
  addrow_table();
});

获取下拉列表的 php 文件：

<?php
  include "config/koneksi.php";
  echo "<select name='finish[]' class='sfinish'>";
  $finish = mysql_query("SELECT * FROM harga");
  while($readf = mysql_fetch_array($finish)){
    echo "<option value='".$readf['finishing']."'>".$readf['finishing']."</option>";
  }
  echo "</select>";
?>

我感谢每个人给我的每一个答案。谢谢。

Answer 1

我认为您要做的是将ajax请求的结果设置为新添加的行，在这种情况下

function addrow_table() { //#p_rows is the tbody of the table
    //store the added row reference in a variable - use appendTo() to return the newly added element reference
    var $row = $("<tr><td><div align=center><input type='text' size='5' class='section' name='section[]' style='font-size:11px'></div></td>" + "<td><div class='desc' style='font-size:11px;'></div></td>" + "<td><div align=center class='finish'></div><input type='hidden' class='hfinish'></td>" + "<td><div align=center><input type='text' size='5' name='hrd[]' style='font-size:11px'></div></td>" + "<td><div align=center><input type='text' size='9' name='length[]' class='length' style='font-size:11px'></div></td>" + "<td><div align=center><input type='text' size='4' class='pc' name='pc[]' style='font-size:11px'></div></td>" + "<td><div align=center class='kg'>0</div><input type='hidden' class='hkg' name='kg[]'></td>" + "<td><div align=center class='price'>0</div><input type='hidden' class='hprice' name='price[]'></td>" + "<td><div align=center class='amount'>0</div><input type='hidden' class='hamount' name='amount[]'></td>" + "<td><input type='hidden' style='font-size:11px'>" + "<div align='center'>" + "<a href='#' id='delrow' style='text-decoration:none;'>" + "<div style='border:1px solid #a1a1a1;" + "background:#dddddd;" + "width:30px;" + "border-radius:5px;'>" + "X" + "</div></a></div></td>" + "</tr>").appendTo('#p_rows');

    $.get("getfinishlist.php", function (item) {
        //find the finish element in the newly added row
        $row.find('.finish').html(item);
    });

    return false;
}

$('#addrow').click(function () { //#addrow is a div
    addrow_table();
});