顯示數據根據下拉菜單ID

Question

HTML和PHP

<?php for($i=0;$i<2;$i++) { ?> 
<select id="name_<?php echo $i;?>"> 
    <option value="John">John</option> 
    <option value="Alice">Alice</option> 
</select> 

<input type="text" id="name-id_<?php echo $i;?>"> 
<input type="text" id="location_<?php echo $i;?>"> 

<?php } ?> 

JS

for (var i = 0; i < 2; i++) 
{ 
    $('select#name_'+i).on('change',function() 
    { 
     name = $('select#name_'+i).val(); 
     if($.trim(name) !='') 
     { 
      $.post('ajax/name.php',{name:name},function(data) 
      { 
       $('input#name-id_'+i).val(data); 
      }); 

      $.post('ajax/location.php',{name:name},function(data) 
      { 
       $('input#location_'+i).val(data); 
      }); 
     } 
    }); 
} 

AJAX/name.php和Ajax/location.php是從數據庫取回數據的文件。我想要的輸出是根據我選擇的下拉菜單數據將數據顯示在名稱和位置列中。

Answer 1

這是一個典型問題使用closure variable in a loop，封閉可變i被所有的變化處理程序之間共享的，如此在循環結束時的i中的所有變化處理程序的值將是2，其將不匹配的任何元件

一個在這種情況下的解決方案是創建用於每個循環的局部閉合迭代使用IIFE

for (var i = 0; i < 2; i++) { 
    (function (idx) { 
     $('select#name_' + idx).on('change', function() { 
      name = $(this).val(); 
      if ($.trim(name) != '') { 
       $.post('ajax/name.php', { 
        name: name 
       }, function (data) { 
        $('input#name-id_' + idx).val(data); 
       }); 

       $.post('ajax/location.php', { 
        name: name 
       }, function (data) { 
        $('input#location_' + idx).val(data); 
       }); 

      } 
     }); 

    })(i) 
} 

---

在這種情況下另一種可能的解決方案可以是爲使用事件數據

for (var i = 0; i < 2; i++) { 
    $('select#name_' + i).on('change', { 
     index: i 
    }, function (e) { 
     name = $(this).val(); 
     if ($.trim(name) != '') { 
      $.post('ajax/name.php', { 
       name: name 
      }, function (data) { 
       $('input#name-id_' + e.data.index).val(data); 
      }); 

      $.post('ajax/location.php', { 
       name: name 
      }, function (data) { 
       $('input#location_' + e.data.index).val(data); 
      }); 

     } 
    }); 
}