根据第二个下拉列表选择填充HTML表 [英] Populate HTML table based on second dropdown selection
问题描述
我有一个带有一个下拉列表的HTML表，并试图添加另一个.无论选择哪个选项，我都只希望表中所有相同的数据，但是不确定添加第二个下拉列表后还要添加什么.仅使用一个，它就会运行，并且表已满.我知道它可能只是添加一两行，但不确定它们应该是什么.看起来用户从下拉菜单中选择了前三个选择之一，然后基于此，用户在下一个下拉菜单中获得了每个选择，然后根据第二个下拉菜单中的哪个选择，表格中填充了JSON中的数据.
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.
这是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]);
})
})
}
我在文件中还有所有的JSON数据，也有一个名为orgs的变量.这是JSON数据的一小段:
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?
推荐答案
您的尝试非常接近.我认为您很难从html中获取ID并访问JSON对象.
You were pretty close in your attempt. I think you over complicated getting the ID out of the html and accessing the JSON object.
下面，我仅对myFunction()进行了更改，该属性从每行id属性中获取osd属性，并从第二个selects值中获取acat属性名称.要获取最终数据，我要像orgs.osd[objKey][acatKey];所示那样访问orgs对象，并创建一个元素，仅在清除任何先前数据之后才将其追加到该行.
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>
这篇关于根据第二个下拉列表选择填充HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
