下拉列表不起作用？

Question

我想根据先前的选择创建一个下拉列表，我曾尝试在此处创建一个下拉列表[fiddle]（（ http://jsfiddle.net/KarinaMcG/krn32/1/ ），但是第二个下拉列表并未填充。我想念/做错了什么？

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区分大小写。

您在此处定义一个函数：

function fillcountryDropDown(systemCountryOption)
{
    // implementation
}

并在这里调用：

fillCountryDropDown(demandwareCountryOption);

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

Answer 2

你不会这样！

Javascript区分大小写...

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