javascript - jQuery 根据选择值结合多行(父函数？)从表中填充文本输入

Question

案例
我制作了一个表格，您可以在其中订购商品。文章以另一种形式插入到表格中。在这些表中，文章保存有文章代码、描述和价格。

这个想法是您在表单中选择一篇文章来下订单。如果您选择文章(使用选择输入)，价格会自动填写在“价格”输入字段中。

问题
目前我的问题是，当您在一行中选择一篇文章时，脚本会在所有其他行中填写相关文章价格，而不是仅在选择输入所在的行中填写。我想我必须对我使用的 Ajax 代码中的 partent 函数做一些事情，但我不知道该怎么做。

谁能给我一些建议？

我使用以下 Ajax/jQuery 脚本:

<script type="text/javascript">
    jQuery(document).ready(function(){
        var id = $(this).parent();
        jQuery('#Article_ID').live('change', function(event) {
            $.ajax({
                url     : 'getData.php',
                type    : 'POST',
                dataType: 'json',
                data    : $('#myForm').serialize(),
                success: function( data ) {
                       for(var id in data) {        
                              $(id).val( data[id] );
                       }
                }
            });
        });
    });
</script>

getData 文件包含以下代码:

$clientId = "-1";
if (isset($_POST['Article_ID'])) {
  $clientId = $_POST['Article_ID'];
}
mysql_select_db($database_connDatabase, $connDatabase);
$query_Recordset1 = sprintf("SELECT * FROM articles WHERE id = %s", GetSQLValueString($Article_ID, "int"));
$Recordset1 = mysql_query($query_Recordset1, $connDatabase) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

$add1 = $row_Recordset1['description'];
$add2 = $row_Recordset1['price'];

$arr = array( 'input#description' => $add1, 'input#price' => $add2 );
echo json_encode( $arr );

mysql_free_result($Recordset1);

表单包含以下规则代码:

<script type="text/javascript">
var count = 0;
$(function(){
    $('p#add_field').click(function(){
        count += 1;
        $('#container').append('<div class="regel"><select id="Article_ID" name="Article_ID" style="width:17px; height:30px; border:none;margin-right:0px;"><option value="">Select</option><option value="1">1</option><option value="2">2</option></select><input id="description" name="description[]' + '" type="text" class="field-l" style="width:425px"/><input id="price" name="price[]' + '" type="text" value="0.00" class="field-l" style="width:75px; margin-left:6px; text-align:right"/></p>' );  
    });
});
</script>

Answer 1

the script fills in the associated article price in all the other rows instead of only in the row where the select input is in

这是因为您追加了新行 onClick ( <div class="regel">..</div> ) 具有相同的 ID: Article_ID , description , price .属性 ID必须是唯一的。

尝试。接下来更改(PHP):

$arr = array( 'input#description' => $add1, 'input#price' => $add2 );
echo json_encode( $arr );

到:

$arr = array( 'description' => $add1, 'price' => $add2 );
echo json_encode( $arr );
die;

更改 JS :

    jQuery('#Article_ID').live('change', function(event) {
        var parent = $(this).parent(); // current `<div class="regel">`
        $.ajax({
            url     : 'getData.php',
            type    : 'POST',
            dataType: 'json',
            data    : $('#myForm').serialize(),
            success: function( data ) {
                $(parent+" #description").val(data.description); // 
                $(parent+" #price").val(data.price);
            }
        });
    });