javascript - 使用 ajax/js 更新多个选择标签之一

Question

我在尝试使用 JavaScript 更新 <select> 时遇到了障碍。我正在创建的页面上的标签。我遇到的问题是，这是一个管理风格的页面，因此一个页面上有多个表单，每个表单都是通过 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>

我有一个表(TableB)，其中包含与其产品链接的所有应用程序的列表，我当前尝试做的是设置页面，以便如果用户更改其中之一的选择字段中的产品生成的表单中，应用程序选择标记通过 AJAX 进行更新。我可以使用 document.getElementById 更新页面上的第一个表单。 ，但我需要它来更新具有与用户正在修改的选择标签相同形式的 id 的标签(例如:用户对第四个表单中的 pProd 标签进行更改，第四个表单中的 pApp 标签得到已更新)

我尝试调用$(this).next(".pApp").innerHTML=data; ，但这似乎没有找到具有正确类别的标签。我也尝试过使用 closest()和sibling()无济于事。我还尝试引用 id 和 class 以获得相同的结果，并且我进行了搜索，但找不到与此类似的问题的任何解决方案。有人有什么建议吗？

Answer 1

id属性必须是唯一的:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).¹

因此，一种解决方案是将 $id 附加到选择列表的 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'>

然后在 AJAX 更新程序中，使用 String.replace() 解析出 $id 的值。 :

$('.pProd').change(function(){
var id = this.id.replace('pProd','');
var string = this.value + ',' + '-1';
$.ajax({
    url: '<?php echo $_SERVER['PHP_SELF'];?>',
    type: 'POST',
    data: {get_option:string},
    success:function(data){
        document.getElementById('pApp'+id).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.
    }

请参阅 this phpfiddle 中的演示.

此外，由于使用了 jQuery，id selector和 html()可用于更新第二个选择列表:

success:function(data){
    $('#pApp'+id).html(data);
}

<小时/>

¹ _{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}