使用Ajax和amp;级联下拉菜单jQuery的

Question

我正在尝试使用jquery和简单的ajax脚本来运行级联下拉系统。我可以得到第一个下拉列表（从数据库中拉取值以填充选择字段），但在第二个或后续，我无法启动ajax脚本。这是我正在使用的代码。任何帮助将不胜感激

<select name="claiming_unit" id="claiming_unit" >
<option value="">Select Claiming Unit</option>
<option value="1">Claiming Unit 1</option>
<option value="2">Claiming Unit 2</option>
<option value="3">Claiming Unit 3</option>
</select>

<script>
    function makeAjaxRequest(opts){
        $.ajax({
            type: "POST",
            data: {
                claimingunit: opts,
            },
            url: "/get_job_categories.pl",
            success: function(res) {
                $("#results").html(res);
            }
        });
    }
    $("#claiming_unit").on("change", function(){
        var selected = $(this).val();
        makeAjaxRequest(selected);
    });
</script>

<div id="results"></div>

这个工作，我的cgi脚本打印一个新的select和ajax脚本来调用

中的另一个下拉列表

<div id="results"></div>

这就是印刷品：

<select name="job_category" id="job_category" >
<option value="">Select Job Category</option>
<option value="1">Job Category 1</option>
<option value="2">Job Category 2</option>
<option value="3">Job Category 3</option>
</select>
<script>
    function makeAjaxRequest2(opts){
        $.ajax({
            type: "POST",
            data: {
                jobcategory: opts,
            },
            url: "/get_job_categories.pl",
            success: function(res) {
                $("#results2").html(res);
            }
        });
    }

    $("job_category").on("change", function(){
        var selected = $(this).val();
        makeAjaxRequest2(selected);
    });
</script>
<div id="results2"></div>

然而，当我从这个菜单中进行选择时，它不会触发并从cgi脚本中获取第三个选择菜单 - <div id="results2"></div>中没有任何内容。谢谢你的帮助。