javascript - 如何使用 jquery + ajax 制作多个依赖下拉列表

Question

我正在尝试构建一个页面，用户可以在其中互相提供工作表。

我正在尝试使用依赖下拉菜单来做到这一点。不确定这是否是正确的术语，所以我将提供一个示例。

集合分类大致如下: 类型 > 类别 > 主题 > 工作表

我的大致思路是:

1. 页面加载类型的 json 并显示类型下拉列表
2. 用户将数学、科学、英语视为类型并选择数学
3. Page 使用 ajax 查询数据库并使用 1、2、3 等级别填充 Topics。
4. 用户选择 4 级
5. 页面使用 ajax 查询数据库并填充适当的 4 年级主题
6. ...等等，直到链的底部

在 javascript 部分:

<script type="text/javascript" language="javascript">
    var types;
    var categories;
    var topics;
    var sheets;

    //load the first types
    $(document).ready(function(){
        $.ajax({
            async: false,
            url: "base_url/json_get_all_wstypes",
            type: 'POST',
            dataType: 'json',
            success: function(output_string){
                types = output_string;
            }
        });
    });

    //by default - intialize types
    $(document).ready(function(){
        var t_choices = "<select name=\"type_id\" id=\"type_picker\" >";
        t_choices += "<option value=\"\" selected=\"selected\">Select a Type</option>";

        $.each(types, function(){
            t_choices += "<option value=\"" + this.type_id.toString() + "\">";
            t_choices += this.type_name.toString();
            t_choices += "</option>";
        });

        t_choices += "</select>";

        $('#type_choices').text('');
        $(t_choices).appendTo('#type_choices');
    });

    //reaction to picking a type 
    $(document).ready(function(){
        $('#type_picker').change(function(){
            var url_arg = $('#type_picker').val().toString();
            var full_url = "base_url/json_get_wscategories_by_type/" + url_arg;

            $.ajax({
                async: false,
                url: full_url,
                type: 'POST',
                dataType: 'json',
                success: function(output_string){
                    categories = output_string;
                }
            });

            var choices = "<select name=\"category_id\" id=\"category_picker\" >"; 
            choices += "<option value=\"\" selected=\"selected\">Select a category</option>";

            $.each( categories, function() {
                choices += "<option value=\"" + this.category_id.toString() + "\">";
                choices += this.category_name.toString();
                choices += "</option>";
            });

            choices += "</select>";

            alert(choices.toString());

            $('#category_choices').text('');
            $(choices).appendTo('#category_choices');

        });
    }); 

    //reaction to picking a category (initialize topic)     
    $(document).ready(function(){
        $('#category_picker').change(function(){
            var url_arg = $('#category_picker').val().toString();
            var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;

            $.ajax({
                async: false,
                url: full_url,
                type: 'POST',
                dataType: 'json',
                success: function(output_string){
                    topics = output_string;
                }
            });

            var choices = "<select name=\"topic_id\" id=\"topic_picker\" >"; 
            choices += "<option value=\"\" selected=\"selected\">Topic a category</option>";

            $.each( topics, function() {
                choices += "<option value=\"" + this.topic_id.toString() + "\">";
                choices += this.topic_name.toString();
                choices += "</option>";
            });

            choices += "</select>";

            alert(choices.toString());

            $('#topic_choices').text('');
            $(choices).appendTo('#topic_choices');

        });
    }); 

    //reaction to picking a topic (initialize sheet)
    similar code pattern as method before it...

    //reaction to picking a sheet (intialize page)
    similar code pattern as the method before...
</script>

在网络表单部分:

<p>
<label for="type_id">Pick a sheet type:</label>
<div id="type_choices">
</div>
</p>


<p>
<label for="categories_id">Pick a category:</label>
<div id="category_choices">
</div>
</p>

<p>
<label for="topic_id">Pick a topic:</label>
<div id="topic_choices">

</div>
</p>

<p>
<label for="worksheet_id">Pick a worksheet:</label>
<div id="sheet_choices">
Please select a topic first to activate this section
</div>
</p>

这适用于选择类型并加载类别的显示，但是一旦我选择了类别，就没有任何反应。另外，如果有人能指出我在网络世界中所谓的东西，我将非常感激。动态依赖下拉菜单没有那么有用，我不确定还能调用它什么。

Answer 1

您的代码不必要地依赖于 jQuery，并且没有有效地重用代码。此解决方案可能需要对您的服务器端代码进行细微的重写，但无论如何都应该更加抽象。尝试更像这样的东西:

<html>
<body>
<select id="type" onchange="updateNext(this, 'category')">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<select id="category" onchange="updateNext(this, 'topic')">
</select>
<select id="topic" onchange="updateNext(this, 'worksheet')">
</select>
<script>
    function updateNext(el, nextName) {
        var url_arg = el.value;
        var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;
        var options, txtStrng;
        //grab ajax data
        $.ajax({
            async: false,
            url: full_url,
            type: 'POST',
            dataType: 'json',
            success: function(output_string){
                options= output_string;
            }
        });
        //create the option list
        $.each( options, function() {
            txtStrng += "<option value=\"" + this.option_id.toString() + "\">";
            txtStrng += this.option_name.toString();
            txtStrng += "</option>";
        });
        //clear the option list
        $('#'+nextName).text('');
        //attach the option list
        $(txtStrng).appendTo('#'+nextName);
    }
</script>