Javascript multiple drop down box

Question

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/"
    }
]

The data you show has categories, but no sub-categories (unless "Useful Information" is considered a sub-category of "Information"). But anyway, yes, you can write JS that updates the options of a select element when some other element is changed. — nnnnnn, Jul 28 '16 at 07:03
@nnnnnn in order to achieve that, any suggestion how? shall I use a for loop? — Alessandro, Jul 28 '16 at 07:07
You can use a loop, yes. http://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — nnnnnn, Jul 28 '16 at 07:12
@nnnnnm thanks, but can you kindly show me how to generate another panel when clicking on one category? The link doesn't show that. Any chance to have a jsfiddle? — Alessandro, Jul 28 '16 at 07:34

score 1 · Accepted Answer · answered Jul 28 '16 at 08:10

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>

Thanks a lot. It's exactly what I was looking for. – Alessandro Jul 28 '16 at 08:42 — Alessandro, Jul 28 '16 at 08:42

Javascript multiple drop down box

1 Answers1