使用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> 

我有一個表（表B），其中包含與他們的產品鏈接的所有應用程序的列表，並且什麼我試圖目前正在設置頁面，以便如果用戶在生成的其中一個表單上的選擇字段中更改產品，則通過AJAX更新應用程序選擇標記。我可以通過使用document.getElementById來更新頁面上的第一個表單，但我需要它使用與用戶正在修改的選擇標記相同形式的標識來更新標記（例如：用戶更改爲第四種形式的pProd標籤，第四種形式的pApp標籤得到更新）

我試圖調用$(this).next(".pApp").innerHTML=data;，但是這看起來沒有找到具有正確類的標籤。我也嘗試使用closest()和sibling()無濟於事。我也曾嘗試引用id和類的結果相同，並且我搜索了周圍，找不到類似於此問題的任何解決方案。有沒有人有什麼建議？

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}