Populate HTML Table Based On Second Dropdown Selection

I have an HTML table with one dropdown and am trying to add another. I simply just want all the same data in the table no matter which choice is chosen but am not sure what else to

Solution 1:

You were pretty close in your attempt. I think you over complicated getting the ID out of the html and accessing the JSON object.

Below I only made changes to myFunction() which grabs the osd property from each rows id attribute and the acat property name from the second selects value. To get the final data I access the orgs object like so orgs.osd[objKey][acatKey]; and create a element to append to the row, only after clearing any previous data.

var orgs = {
  osd: {
    acat_i: {
      authority: "unknown",
      governance: "unknown",
      management: "unknown",
      use_cases: "unknown",
      community: "unknown",
      definitions: "unknown",
      periodicity: "unknown",
      start_end: "unknown",
      it_system: "gems",
      data_quality: "unknown",
      tailoring: "unknown",
      data_access: "unknown",
      handling: "unknown",
      data_lifecycle: "unknown",
      historical: "unknown",
      integration: "unknown",
      review: "unknown"
    },
    acat_ii: {
      authority: "unknown",
      governance: "unknown",
      management: "unknown",
      use_cases: "unknown",
      community: "unknown",
      definitions: "unknown",
      periodicity: "unknown",
      start_end: "unknown",
      it_system: "unknown",
      data_quality: "unknown",
      tailoring: "unknown",
      data_access: "unknown",
      handling: "unknown",
      data_lifecycle: "unknown",
      historical: "unknown",
      integration: "unknown",
      review: "unknown"
    }
  }
}

function myFunction() {
  $("#data_values tr:not(:first)").each(function() {
    var objKey = $(this).attr("id");
    var acatKey = $('#data_options').val().toLowerCase();
    if (typeof orgs.osd[objKey] === "undefined") {
      console.log("no prop exists with " + objKey);
      return;
    }
    //clear any previous td data
    $(this).find("td:gt(0)").remove();
    var data = orgs.osd[objKey][acatKey];
    $(this).append("<td>" + data + "</td>");
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-----first drop down---->
<select id="test_drop">
        <option value="selection1">selection1</option>
        <option value="selection2">selection2</option>
        <option value="selection3">selection3</option>
    </select>

<!-----second drop down---->
<select id="data_options" onchange="myFunction()">
        <option value="authority">Authority</option>
        <option value="governance">Governance</option>
        <option value="Management">Management</option>
        <option value="use_cases">Use Cases</option>
        <option value="community">User Community</option>
        <option value="Definitions">Definitions</option>
        <option value="Periodicity">Periodicity</option>
        <option value="Start/End Criteria">Start/End Criteria</option>
        <option value="it_system">IT System/Database</option>
        <option value="Data Quality">Data Quality</option>
        <option value="Tailoring">Tailoring</option>
        <option value="Data Access">Data Access</option>
        <option value="Handling and Security">Handling and Security</option>
        <option value="Data Lifecycle">Data Lifecycle</option>
        <option value="Historical Archives">Historical Archives</option>
        <option value="Integration">Integration</option>
        <option value="Review/Approval">Review/Approval</option>
    </select>

<table id="data_values">

  <thead>
    <TH></TH>
    <TH id="osd">OSD</TH>
    <TH id="army">Army</TH>
    <TH id="navy">Navy</TH>
    <TH id="af">Air Force</TH>
  </thead>

  <TR id="acat_i">
    <TD>ACAT I</TD>
  </TR>
  <TR id="acat_ii">
    <TD>ACAT II-IV</TD>
  </TR>
  <TR id="acat_iii">
    <TD>ACAT III-IV</TD>
  </TR>
  <TR id="bds">
    <TD>BDS</TD>
  </TR>
</TABLE>