Как сделать несколько зависимых выпадающих списков с помощью jquery + ajax

Question

Я пытаюсь создать страницу, где пользователи могут давать рабочие листы друг другу.

Я пытаюсь сделать это с зависимыми выпадающими списками. Не уверен, что это правильный термин, поэтому я приведу пример.

Примерно установленные категоризации выглядят следующим образом: Types> Категория> Темы> Листов

Грубо моя идея:

1. Page нагрузка JSON для типов и отображает тип выпадающего списка
2. Пользователь видит Math , Наука, английский как типы и выборка Математика
3. Страница использует ajax для запроса базы данных и заполняет темы со степенью 1, 2, 3 и т. Д.
4. Пользователь выбирает класс 4
5. Страница использует Ajax для запроса базы данных и заполнит с соответствующей категории 4 темы
6. ... и так далее, пока в нижней части цепи

В яваскрипта разделе:

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

В разделе WebForm:

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