Question

我试图根据第一个下拉列表中选择的内容在第二个下拉列表中显示或隐藏某些选择。这就是我的功能。总的来说，我有一个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" 
        },

如果你可以协助我如何展示或隐藏某些选择，那就太棒了。谢谢！

Answer 1

我建议你使用vue并在你的选择中添加一个v-model，然后你可以通过v-if轻松地显示内容。

（如果您知道vue是如何工作的那样）

根据第一个下拉列表选择显示/隐藏第二个下拉列表

1 个答案: