異なるHTMLドロップダウン選択のデータベース値を表示

Question

データベースのテーブルからデータをインポートするドロップダウンリストがあります。選択した内容に応じて、ドロップダウンリストで選択された番号に関連する必要な情報を示す表を表示します。たとえば、ドロップダウンリストでMR_IDを1に設定した場合、Supp_ID値（1つ以上の値）をテーブルに表示することができます。これどうやってするの？

この表は、MR_ID（ドロップダウンリストに表示されるもの）とSupp_IDの2列のみです。ここで

は私のクエリは、foreach文のために使用されている、私はこれまでのところ、また

$dbh = new PDO("sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass); 
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$sql = "SELECT DISTINCT CAST(MR_ID AS INT) AS MR_ID FROM Table_Name"; 
$sql_one = "SELECT CAST(Supp_ID AS INT) AS Supp_ID FROM Table_Name"; 

$users = $dbh->query($sql); 
$users_one = $dbh->query($sql_one); 

HTML/PHPのJavaScriptの少し続いている私のHTML/PHP：

<!-- Dropdown List --> 
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);"> 
    <option selected value="select">Choose a MR_ID</option> 
     <?php foreach($users->fetchAll() as $user) { ?> 
      <option data-name="<?php echo $user['MR_ID'];?>"> 
       <?php echo $user['MR_ID'];?> 
      </option> 
     <?php } ?> 
    </select> 
</form> 

<!-- Table --> 
<p> 
    <div id="table_div"> 
     <table border="1" id="index_table" class="ui-widget ui-widget-content"> 
      <thead> 
       <tr class="ui-widget-header"> 
       <td>MR ID</td> 
       <td>Supplier ID</td> 
       <td>Edit</td> 
       </tr> 
      </thead> 
      <?php foreach($users_one->fetchAll() as $supp) { ?> 
      <tr> 
       <td class="mr_id"><div id="dropdown_selection"></div></td> 
       <td class="supp_id"><?php echo $supp['Supp_ID']?></td> 
       <td><input type="button" class="edit" name="edit" value="Edit"> 
      </tr> 
      <?php } ?> 
     </table> 
    </div> 

このJavaScriptコードは、ドロップダウンリストで選択された内容を読み込みますが、その内容はその内容です。

function updatetable(myForm) { 

    var selIndex = myForm.master_dropdown.selectedIndex; 
    var selName = myForm.master_dropdown.options[selIndex].text; 
    document.getElementById("dropdown_selection").innerHTML = String(selName); 
} 

Answer 1

アヤックスは次のようになります。

$.ajax ({ 
    url: "table_drawing.php", 
    method: "get", //can be post or get, up to you 
    data: { 
     mr_id : mr_id  
    }, 
    beforeSend: function() { 
     //Might want to delete table and put a loading screen, otherwise ignore this 
     // $("#table_div").html(loading_screen); 
    }, 
    success: function(data){ 
     $("#table_div").html(data); // table_div is the div you're going to put the table into, and 'data' is the table itself. 
    } 
}); 

table_drawing.phpでは、mr_idの入力のオフに基づいて、テーブルを描画されます。