Display Database Values on Different HTML Dropdown Selections
<p>I have a dropdown list that is imported with data from a table in a database. Depending on what is selected, I want to display a table that shows the necessary information that correlates to the number that was selected in the dropdown list. So, for example, if I select a MR_ID of 1 in the dropdown list, I want the Supp_ID values (can be more than 1 value) to be displayed in a table. How can I do this?</p>

<p>The table is only 2 columns, MR_ID (which is what is displayed in the dropdown list) and Supp_ID.</p>

<p>Here are my queries used for the foreach loops, my HTML/PHP that I have so far, also followed by the little bit of JavaScript</p>

<pre><code>$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh-&gt;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-&gt;query($sql);
$users_one = $dbh-&gt;query($sql_one);
</code></pre>

<p>HTML/PHP: </p>

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

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

<p>This JavaScript code reads what was selected in the dropdown list but that is the extent of what it does.</p>

<pre><code>function updatetable(myForm) {

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