Geek asks and answers

How to make multiple dependent dropdowns using jquery + ajax

I am trying to create a page where users can give worksheets to each other.

I am trying to do this with dependent dropdowns. Not sure if this is the correct term, so I will give an example.

A roughly defined categorization is as follows: Types> Categories> Themes> Tables

Roughly my idea:

  • Loading json page for dropdown list of types and mappings
  • The user sees mathematics, science, English as types and samples of mathematics
  • The page uses ajax to query the database and populates topics with a rating of 1, 2, 3, etc.
  • User selects class 4
  • The page uses ajax to query the database and populates the relevant class 4 topics
  • ... and so on to the bottom of the chain

In the javascript section:

<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>

, , . , - , , . , , .

+3
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>
+3

More articles:


All Articles