下拉列表不起作用？

Question

I am looking to create a drop down list based on previous selection, I have tried creating one here [fiddle](( http://jsfiddle.net/KarinaMcG/krn32/1/ ), but my second drop down is not populating. What am I missing/doing wrong?

HTML

<div>System Selector:
    <select class="systemDropDown">
        <option value="">--Select System--</option>
        <option value="Demandware">Demandware</option>
        <option value="Site Replication">Site Replication</option>
        <option value="3rd Party Request">3rd Party Request</option>
        <option value="Log-in (all others)">Log-in (all others)</option>
        <option value="Log-in (Global Collect)">Log-in (Global Collect)</option>
        <option value="Global Collect Issue">Global Collect Issue</option>
        <option value="Store Locator">Store Locator</option>
        <option value="New Product Request">New Product Request</option>
        <option value="Other">Other</option>
    </select>
</div>
<div>Country:
    <select class="countryDropDown">
        <option value="">--Select Country--</option>
    </select>
</div>

Javascript

jQuery(document).ready(function ($) {

    $(".systemDropDown").change(function () {
        var system = $(this).val();

        function fillcountryDropDown(systemCountryOption) {
            $.each(systemCountryOption, function (val, text) {
                $('.countryDropDown').append(
                $('<option></option>').val(val).html(text));
            });
        }

        function clearCountryDropDown() {
            $('.countryDropDown option:gt(0)').remove();
        }
        if (system == 'Demandware') {
            clearCountryDropDown();

            var demandwareCountryOption = {

                SPAIN: 'Spain',
                IRELAND: 'Ireland',
                USA: 'Usa'
            };

            fillCountryDropDown(demandwareCountryOption);
        } else if (system == 'Site Replication') {
            clearCountryDropDown();
            var sitereplicationCountryOption = {

                LONDON: 'London',
                LIVERPOOL: 'Liverpool',
                DERBY: 'Derby'
            };
            fillCountryDropDown(sitereplicationCountryOption);
        }
        var countryOptions = {
            val1: 'text1',
            val2: 'text2'
        };

    });

});

Answer 1

JavaScript is case-sensitive.

You define a function here:

function fillcountryDropDown(systemCountryOption)
{
    // implementation
}

And call it here:

fillCountryDropDown(demandwareCountryOption);

Change the definition to fillCountryDropDown and the jsFiddle seems to work at that point. (Also select jQuery to be loaded, which I'm sure you do on the page but forgot on the jsFiddle.)

Answer 2

You will not like this!

Javascript is case sensitive ...

Your function fillcountryDropDown is not called. you need to change the function name to fillCountryDropDown