从级联 SELECT 元素更改事件调用外部 JS 函数

Calling external JS function from cascading SELECT element change event

本文关键字：调用 外部 JS 函数 事件 级联 SELECT 元素      更新时间：2023-09-26

我是jQuery菜鸟，我正在尝试弄清楚如何将此脚本移动到外部.js文件。 我已经尝试复制它并在页面上引用，但它似乎不起作用。

我在这里错过了什么？

<script type="text/javascript">
$(document).ready(function () {
    $('#YearD').change(function () {
        var selectedYear = $(this).val();
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#Month');
                monthsSelect.empty();
                $.each(months, function (index, month) {
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text
                    }));
                });
            });
        }
    });
});
</script>
<script type="text/javascript">
$('#Month').change(function () {
    var selectedMonth = $(this).val();
    if (selectedMonth != null && selectedMonth != '') {
        $.getJSON('@Url.Action("Days")', { month: selectedMonth }, function (days) {
            var daysSelect = $('#Day');
            daysSelect.empty();
            if (days == 0) {
                daysSelect.css("visibility", "hidden");
            }
            else {
                daysSelect.css("visibility", "visible");
            }
            $.each(days, function (index, day) {
                daysSelect.append($('<option/>', {
                    value: day.value,
                    text: day.text
                }));
            });
        });
    }
});
</script>

如果你有，

<script type="text/javascript">
$(document).ready(function () {
   // your code
})

你应该做，

<script type='text/javascript' src='scripts/myfile.js'></script>

在您的 HTML 文件中。

在您的 myfile.js 文件中（驻留在scripts文件夹中）

$(document).ready(function () {
   // your code
})

请注意，myfile.js 文件中没有<script>标签。

另外，请记住您的代码使用的是 jQuery ，因此请在引用文件后引用您的myfile.js jQuery.js。

例如

<script type='text/javascript' src='scripts/myfile.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

另外，将您的代码放在 $(document).ready 中。您的第二个代码在 dom 准备就绪之前执行，并将抛出错误。

它应该是这样的（在你的我的文件中.js）

$(document).ready(function () {
    $('#YearD').change(function () {
        var selectedYear = $(this).val();
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#Month');
                monthsSelect.empty();
                $.each(months, function (index, month) {
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text
                    }));
                });
            });
        }
    });
    $('#Month').change(function () {
    var selectedMonth = $(this).val();
    if (selectedMonth != null && selectedMonth != '') {
        $.getJSON('@Url.Action("Days")', { month: selectedMonth }, function (days) {
            var daysSelect = $('#Day');
            daysSelect.empty();
            if (days == 0) {
                daysSelect.css("visibility", "hidden");
            }
            else {
                daysSelect.css("visibility", "visible");
            }
            $.each(days, function (index, day) {
                daysSelect.append($('<option/>', {
                    value: day.value,
                    text: day.text
                }));
            });
        });
        }
    });
});

将以下内容添加到要运行代码的页面：

<script src="js_file_name.js"></script>

然后将代码直接复制并粘贴到名为 js_file_name.js 的文件中

从外部文件中删除<script type="text/javascript">和</script>。

将此添加到您的 HTML 文件中：

<script type="text/javascript" src="filename.js"></script>
相关文章：