Alessandro Alessandro - 4 months ago 8
Javascript Question

Javascript multiple drop down box

Is there a way to get a multiple drop down field from a list of arrays without having to hardcode the information into the HTML? So that by selecting each category the relevant subcategory will drop down.
The list looks something like this:

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

The following code does the work. It's vanilla 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>

Comments