Question

有没有办法从数组列表中获取多个下拉字段而无需将信息硬编码到HTML中？因此，通过选择每个类别，相关子类别将下降。该列表看起来像这样：

var listData = [
    {
        "title": "Meeting Room",
        "category": "Forms",
        "url": "https://www.google.co.uk/"
    },
    {
        "title": "Book a Car",
        "category": "Forms",
        "url": "https://www.google.co.uk/"
    },
    {
        "title": "Stationery",
        "category": "Forms",
        "url": "https://www.google.co.uk/"
    },
    {
        "title": "Hospitality",
        "category": "Forms",
        "url": "https://www.google.co.uk/"
    },
    {
        "title": "Communications",
        "category": "News",
        "url": "https://blogs.office.com/"
    },
    {
        "title": "Industries",
        "category": "News",
        "url": "https://blogs.office.com/"
    },
    {
        "title": "Policy",
        "category": "News",
        "url": "https://blogs.office.com/"
    },
    {
        "title": "Get started",
        "category": "Information",
        "url": "https://support.office.com/"
    },
    {
        "title": "What do you need",
        "category": "Useful Information",
        "url": "https://support.office.com/"
    },
    {
        "title": "Accessibility features",
        "category": "Useful Information",
        "url": "https://support.office.com/"
    },
    {
        "title": "Videos",
        "category": "Useful Information",
        "url": "https://support.office.com/"
    }
]

Answer 1

以下代码可以正常工作。这是香草JS。

<!DOCTYPE html>
<html>

<head>
    <title>Dynamic Form</title>
</head>

<body>
    <select id="categories" onchange="changeCategory(event)"> </select>
    <select id="title"> </select>
    <select id="url"> </select>
    <script>
        var listData = [{
            "title": "Meeting Room"
            , "category": "Forms"
            , "url": "https://www.google.co.uk/"
}, {
            "title": "Book a Car"
            , "category": "Forms"
            , "url": "https://www.google.co.uk/"
}, {
            "title": "Stationery"
            , "category": "Forms"
            , "url": "https://www.google.co.uk/"
}, {
            "title": "Hospitality"
            , "category": "Forms"
            , "url": "https://www.google.co.uk/"
}, {
            "title": "Communications"
            , "category": "News"
            , "url": "https://blogs.office.com/"
}, {
            "title": "Industries"
            , "category": "News"
            , "url": "https://blogs.office.com/"
}, {
            "title": "Policy"
            , "category": "News"
            , "url": "https://blogs.office.com/"
}, {
            "title": "Get started"
            , "category": "Information"
            , "url": "https://support.office.com/"
}, {
            "title": "What do you need"
            , "category": "Useful Information"
            , "url": "https://support.office.com/"
}, {
            "title": "Accessibility features"
            , "category": "Useful Information"
            , "url": "https://support.office.com/"
}, {
            "title": "Videos"
            , "category": "Useful Information"
            , "url": "https://support.office.com/"
}];

        function removeOptions(selectbox) {
            var i;
            for (i = selectbox.options.length - 1; i >= 0; i--) {
                selectbox.remove(i);
            }
        }

        function changeCategory(event) {
            removeOptions(document.getElementById('title'))
            removeOptions(document.getElementById('url'))
            mySelect1 = document.getElementById('title')
            mySelect2 = document.getElementById('url');
            listData.forEach(function (item, index) {
                if (item.category == event.target.value) {
                    mySelect1.options[mySelect1.options.length] = new Option(item.title, item.title);
                    mySelect2.options[mySelect2.options.length] = new Option(item.url, item.url);
                }
            });
        }
        Array.prototype.contains = function (obj) {
            var i = this.length;
            while (i--) {
                if (this[i] == obj) {
                    return true;
                }
            }
            return false;
        }
        var mySelect = document.getElementById('categories');
        var categories = new Array;
        listData.forEach(function (item, index) {
            if (!categories.contains(item.category)) {
                mySelect.options[mySelect.options.length] = new Option(item.category, item.category);
                categories.push(item.category);
            }
        });
    </script>
</body>

</html>

Javascript多个下拉框

1 个答案: