0

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

    });

});
4

2 回答 2

3

JavaScript 区分大小写。

你在这里定义一个函数：

function fillcountryDropDown(systemCountryOption)
{
    // implementation
}

并在这里调用它：

fillCountryDropDown(demandwareCountryOption);

将定义更改为fillCountryDropDown，此时 jsFiddle 似乎可以正常工作。（还选择要加载的 jQuery，我确定您在页面上执行此操作，但在 jsFiddle 上忘记了。）

于 2013-09-25T12:34:57.630 回答
1

你不会喜欢这个的！

Javascript 区分大小写...

你的函数fillcountryDropDown没有被调用。您需要将函数名称更改为fillCountryDropDown

于 2013-09-25T12:35:43.710 回答