Javascript 使用ajax/js更新多个select标记中的一个

在尝试使用JavaScript更新正在创建的页面上的

标记时，我遇到了一个障碍。我遇到的问题是，这是一个管理风格的页面，因此在一个页面上有多个表单，每个表单都是通过PHP为SQL数据库中的一个条目生成的。为了更好地理解我所说的内容，以下是我项目中的一些代码：

<?php
$query = "SELECT * FROM tableA ";
$data = $PDOcon->query($query);
$rows = $data->fetchAll(PDO::FETCH_ASSOC);

foreach ($rows as $row) {
    $id = $row['id'];
    $head = $row['head'];
    $cont = $row['content'];
    $app = $row['Product'];
    $category = $row['CatID'];

    Print "<form class='mgmt-ListView-Tall' action=\"#Anchor$id\" method=\"post\" width=\"60%\">
    <input type=\"hidden\" name=\"id\" value=\"$id\" readonly />
    <label for='pHead'>Heading: </label>
    <input id='pHead' class='lbl-w25' name='pHead' value='$head' />
    <label for='pCont'>Content: </label>
    <input id='pCont' class='lbl-w20' name='pCont' value='$cont' />
    <label for='pProd' >Product: </label>
    <select id='pProd' name='pProd' class='pProd'>
        <option value='0'>Product 1</option>
        <option value='1'>Product 2</option>
    </select>
    <label for='pApp'>Application: </label>
    <select id='pApp' name='pApp' class='pApp'>
    </select>
    </select>
    <span><input class='mgmt-Button' id='editbtn' type=\"submit\" name='edit' value='Edit' /></span>
    </form>";
}
?>
<script type="text/javascript">
$('.pProd').change(function(){
var string = this.value + ',' + '-1';
    $.ajax({
        url: 'scripts/get_app.php',
        type: 'POST',
        data: {get_option:string},
        success:function(data){
            document.getElementById('pApp').innerHTML=data; //This updates the select tag in the first form on the page, not the same form that the user was making changes in.
        }
    });
});
</script>

属性必须是唯一的：

id全局属性定义了唯一标识符（id），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符）、编写脚本或设置样式（使用CSS）时标识元素

因此，一种解决方案是将
$id
附加到select列表的id属性

<label for='pProd$id' >Product: </label>
<select id='pProd$id' name='pProd' class='pProd'>
    <option value='0'>Product 1</option>
    <option value='1'>Product 2</option>
</select>
<label for='pApp$id'>Application: </label>
<select id='pApp$id' name='pApp' class='pApp'>


1
属性必须是唯一的：

id全局属性定义了唯一标识符（id），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符）、编写脚本或设置样式（使用CSS）时标识元素

因此，一种解决方案是将
$id
附加到select列表的id属性

<label for='pProd$id' >Product: </label>
<select id='pProd$id' name='pProd' class='pProd'>
    <option value='0'>Product 1</option>
    <option value='1'>Product 2</option>
</select>
<label for='pApp$id'>Application: </label>
<select id='pApp$id' name='pApp' class='pApp'>


1
这是因为
id
在页面上应该是唯一的。在您的用例中，您有多个具有相同id的行，当您选择该元素时，它将只获得第一个元素。改为使用
classes
并需要指定正确的上下文
此
我已尝试通过id和类引用，但没有骰子，这是因为
id
在页面上应该是唯一的。在您的用例中，您有多个具有相同id的行，当您选择该元素时，它将只获得第一个元素。改为使用
classes
并需要指定正确的上下文
此
我已尝试通过id和类引用，没有骰子。这似乎是我所需要的，而且效果很好。这似乎是我所需要的，而且效果很好。
success:function(data){
    $('#pApp'+id).html(data);
}