Javascript 下拉列表不工作？

我希望根据以前的选择创建一个下拉列表，我已经尝试在这里创建一个[fiddle]（（）），但是我的第二个下拉列表没有填充。我遗漏了什么/做错了什么

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

    });

});

jQuery（文档）.ready（函数（$）{
$（“.systemDropDown”）.change（函数（）{
var system=$（this.val（）；
函数FillCountry下拉列表（systemCountryOption）{
$.each（systemCountryOption，函数（val，text）{
$（'.countryDropDown'）。追加(
$（''）.val（val.html（text））；
});
}
函数clearCountryDropDown（）{
$（'.countryDropDown选项：gt（0'）.remove（）；
}
如果（系统=='Demandware'）{
clearCountryDropDown（）；
var DemandWaveCountryOption={
西班牙：“西班牙”，
爱尔兰：“爱尔兰”，
美国：“美国”
};
fillCountryDropDown（demandwareCountryOption）；
}else if（系统==‘站点复制’）{
clearCountryDropDown（）；
var sitereplicationCountryOption={
伦敦：“伦敦”，
利物浦：“利物浦”，
德比：“德比”
};
FillCountry下拉列表（SiteReplicationCountry选项）；
}
var countryOptions={
val1:'text1'，
val2:'text2'
};
});
});

JavaScript区分大小写

您可以在此处定义一个函数：

function fillcountryDropDown(systemCountryOption)
{
    // implementation
}

在这里叫它：

fillCountryDropDown(demandwareCountryOption);

---

将定义更改为

fillCountryDropDown

，此时JSFIDLE似乎可以工作。（同时选择要加载的jQuery，我确信您在页面上这样做了，但在JSFIDLE上忘记了。）

JavaScript区分大小写

您可以在此处定义一个函数：

function fillcountryDropDown(systemCountryOption)
{
    // implementation
}

在这里叫它：

fillCountryDropDown(demandwareCountryOption);

---

将定义更改为

fillCountryDropDown

，此时JSFIDLE似乎可以工作。（同时选择要加载的jQuery，我确信您在页面上这样做了，但在JSFIDLE上忘记了。）

您不会喜欢这样的

Javascript区分大小写

---

您的函数

fillcountryDropDown

未被调用。您需要将函数名更改为

fillcountryDropDown

您不会喜欢这样

Javascript区分大小写

---

你的函数

fillcountryDropDown

没有被调用。你需要将函数名更改为

fillcountryDropDown

该死。你赢了我46分secs@KarinaMcGourty：它以什么方式不起作用？当我在您的JSFIDLE上做一个更改时（并选择左侧菜单上的jQuery），然后重新运行代码，第二个下拉列表将在第一个下拉列表更改时填充。@David抱歉David它正在工作，我打开了旧的jsFiddle，我的错，谢谢你的帮助！：）该死。你赢了我46分secs@KarinaMcGourty：它以什么方式不起作用？当我在您的JSFIDLE上做了一个更改（并在左侧菜单上选择jQuery）并重新运行代码时，第二个下拉列表将在第一个更改时填充。@David抱歉，David，它正在工作，我打开了我正在进行更改的旧JSFIDLE，糟糕，谢谢您的帮助！：）