Tuesday, 20 January 2015

Dynamic drop-down from XML (2 drop-downs 1 populates other)

Question
How can i use my XML file to populate two drop-downs where the 1st one defines whats displayed in the second.

Answer
 
<script type="text/javascript">
/* wait until DOM has loaded */
$(document).ready(function() {
    /* declare array to store categories in */
    var categories = [];
    /* load a remote page using an HTTP request. */
    $.ajax({
        /* type of request */
        type: "GET",
        /* url where request is sent */
        url: "pop.xml",
        /* type of data we expect back */
        dataType: "xml",
        /* function to be called if the request is a success */
        success: function(xml) {
            /* declare variable for recipe select and hide  */
            var selectCategory = $('#selectCategory');
            var listRecipe = $('#listRecipe');
            $(listRecipe).hide();
            /* parse xml file and find each recipe node */
            $(xml).find('recipe').each(function() {
                /* for each recipe node get the category */
                var category = $(this).find('category').text();
                /* put each category into our array */
                categories.push(category);
            });
            /* use our function to sort categories and remove duplicates */
            getUnique()
                /* when selectCategorys select is changed */
            $("#selectCategory").change(function() {
                /* empty recipe select then show */
                listRecipe.empty();
                $(listRecipe).show();
                /* declare variable for value of category selected */
                var selectCategory = $('#selectCategory').val();
                /* parse xml file and find each recipe node */
                $(xml).find('recipe').each(function() {
                    /* for each recipe node get the category and title */
                    var category = $(this).find('category').text();
                    var title = $(this).find('title').text();
                    /* if selected category matches category in xml file add it to listRecipe select */
                    if (category == selectCategory) {
                        listRecipe.append("<option value='" + category + "'>" + title + "</option>");
                    }
                });
            });
        },
        error: function() {
            $('#recipeFinder').hide();
            alert("Error: Something went wrong");
        }
    });

    function getUnique() {
        /* declare variables and array */
        var options = $('#selectCategory');
        var uniqueCategories = [];
        /* iterate over array categories */
        for (var i = 0; i < categories.length; i++) {
            /* if category in categories array is not in outputArray add it */
            if ((jQuery.inArray(categories[i], uniqueCategories)) == -1) {
                uniqueCategories.push(categories[i]);
            }
        }
        /* iterate over array outputArray and add each item to selectCategory select */
        for (var i = 0; i < uniqueCategories.length; i++) {
            options.append('<option value="' + uniqueCategories[i] + '">' + uniqueCategories[i] + '</option>');
        }
        /* replace 1st item in selectCategory and select it */
        options.children(":first").text("please make a selection").attr("selected", true);
    }
});
</script> 
 
Demo xml-miltiple-select.php

No comments:

Post a Comment