0

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 add once I add the second dropdown. With just the one, it runs and the tables fill up. I know it is probably just adding one or two lines but am not sure what they should be. It should look like the user chooses one of the first 3 selections from the dropdown, then based on that, the user gets every selection in the next dropdown, and then based on which selection is from the 2nd drop down, the table fills with the data from the JSON.

Here is the HTML table:

<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>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>
   <TR id="acat_ii">
      <TD>ACAT II-IV</TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>
   <TR id="acat_iii">
      <TD>ACAT III-IV</TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>
   <TR id="bds">
      <TD>BDS</TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>
</TABLE>

Here are the drop downs:

<body>
    <!-----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>

And here is the code that I have:

<script>
    function myFunction() {

        var selection = document.getElementById("data_options").value;

        //document.getElementById("test_drop").value;
        //var optionSelected = this.option[this.selectedIndex];
        //if(optionSelected.textContext != '            

        var table = document.getElementById("data_values");

        $("#data_values tr").each(function () {
            var $selection = $('#data_options').val();

            $(this).find('td:not(:first-child)').each(function () {

            var $col = $(this).closest('table').find('th').eq($(this).index()).attr('id');
            var $row = $(this).closest('tr').attr('id');

            $(this).text(orgs[$col][$row][$selection]);
        })
})
}

I have all of the JSON data in the file as well under a variable called orgs. Here is a small snippet of the JSON 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" 
        },

How can I write the code to populate after the second drop down is chosen instead of the first?

Jimmy Lange
  • 33
  • 1
  • 4
  • Personally it would be helpful if you could explain to us more clearly what you want. In a manner like "When the user chooses an option from the first dropdown, then ...... should happen, and .... should happen, and ... Then, when the user chooses an option in the second dropdown, then .... should happen, and .... should happen, etc." It would also be helpful to see an example of some of the json. – Taplar Dec 15 '17 at 15:56
  • In general, when a question author on Stack Overflow says "please help me with ", they usually mean they want someone to write it for them. Even if that is not what you intended, it's how it sounds! We get it a lot. As @Taplar says, if you can explain what you get and what you expected in more detail, that would be helpful - does your existing code create the second (dependent) menu? What is that code meant to do? – halfer Dec 15 '17 at 16:01
  • @Taplar - I have edited the question and added some parts to it. It's almost as if the first drop down will be irrelevant because no matter what the option is, every selection should be available for the second dropdown. Then based on the second dropdown, the HTML table populates with the data. My existing code right now shows both dropdowns and the table below but when the second selection is chosen, it does not populate the data. It did before I added the second dropdown but not since adding the second. – Jimmy Lange Dec 15 '17 at 17:22

1 Answers1

0

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>
Andrew Lohr
  • 5,380
  • 1
  • 26
  • 38