CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Karina
Karina

Reputation: 663

Drop Down List not working?

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'
        };

    });

});

Upvotes: 0

Views: 190

Answers (2)

MarsOne
MarsOne

Reputation: 2186

You will not like this!

Javascript is case sensitive ...

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

Upvotes: 1

David
David

Reputation: 218798

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.)

Upvotes: 3

Related Questions