gpt4 book ai didi

javascript - 根据第一个下拉菜单选择显示/隐藏第二个下拉菜单

转载 作者:行者123 更新时间:2023-11-30 20:53:53 25 4
gpt4 key购买 nike

我试图根据在第一个下拉列表中选择的内容在第二个下拉列表中显示或隐藏某些选择。这就是我的职能。总的来说,我有一个 HTML 表,我想根据所选的选择用我的 JSON 数据填充它。现在,它只会填充一个下拉列表。我想添加一个下拉列表以更好地对它们进行分类。

<script>
function myFunction() {

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

document.getElementById("test_drop").value;

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

然后这是我的两个下拉菜单。

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

因此,例如,如果在第一个下拉列表中选择了选项 1,我希望第二个下拉列表中的前 6 个选项。如果选择了选项 2,我想要接下来的 6 个选项。如果选择了选项 3,我希望显示最后 5 个选项。然后,一旦显示第二个选择,我的 HTML 表中就会填充 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"
},

如果您能帮助我了解如何显示或隐藏某些选择,那就太好了。谢谢!

最佳答案

我建议您使用 vue 并将 v-model 添加到您的选择中,然后您可以从那里轻松地使用 v-if 显示内容。

(如果你知道 vue 是如何工作的)

关于javascript - 根据第一个下拉菜单选择显示/隐藏第二个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47875225/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com