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来更新页面上的第一个表单，但是我需要它来更新标签，该标签与用户正在修改的select标签的格式相同（例如：user对第4种形式的pProd标签进行更改，第4种形式的pApp标签更新）

我试图调用$(this).next(".pApp").innerHTML=data;，但这似乎找不到具有正确类的标记。我也尝试使用closest()和sibling()无效。我也尝试引用具有相同结果的id和class，并且我已经搜索过并且找不到与此类似的问题的任何解决方案。有没有人有任何建议？

Answer 1

id属性必须是唯一的：

id 全局属性定义了唯一标识符（ID），在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用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

使用ajax / js更新多个选择标记之一

1 个答案: