Question

我有一个带有一个下拉列表的HTML表，我正在尝试添加另一个。我只是想在表中选择所有相同的数据，但是在添加第二个下拉列表时我不确定还要添加什么。只有一个，它运行，表填满。我知道这可能只是添加了一两行，但我不确定它们应该是什么。它应该看起来像用户从下拉列表中选择前3个选项中的一个，然后基于此，用户在下一个下拉列表中获取每个选择，然后根据第二个下拉列表中的哪个选项，表填充来自JSON的数据。

这是HTML表格：

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

以下是下拉菜单：

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

以下是我的代码：

<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]);
        })
})
}

我在文件中以及名为orgs的变量下拥有所有JSON数据。这是一小段JSON数据：

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" 
        },

如何在选择第二个下拉列表而不是第一个下拉列表后编写要填充的代码？

Answer 1

你的尝试非常接近。我认为你复杂地从HTML中获取ID并访问JSON对象。

下面我只对myFunction()进行了更改，它从每个行osd属性中获取id属性，从第二个选择值中获取acat属性名称。为了获得最终数据，我访问orgs对象，如orgs.osd[objKey][acatKey];，并在清除任何先前数据后创建一个附加到行的元素。

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>

根据第二个下拉选择填充HTML表

1 个答案: