JQuery - динамически добавить optgrounp

Question

Я пытаюсь загрузить категории из одного стола, а затем материалы из второго, используя Jquery, чтобы использовать категорию в качестве группы opt и группы в качестве опций. У меня есть следующий код:

$.ajax({ 
     type: "POST", 
     dataType: "json", 
     data: '', 
     url: "select_cat.php", 
     success: function(cat_data) { 

      var sel = $("#material_select"); 
      sel.empty(); 

      for (var cat_i=0; cat_i<cat_data.length; cat_i++) { 
       // Print header 
       sel.append('<optgroup label=' +cat_data[cat_i].cat_displayname+ '>'); 
       // Get materials from category 
       $.ajax({ 
        type: "POST", 
        dataType: "json", 
        data: 'current_material_cat=' + cat_data[cat_i].cat_id, 
        url: "select_mat.php", 
        success: function(data) { 

         for (var i=0; i<data.length; i++) { 
          sel.append('<option value="' + data[i].value + '">' + data[i].displayname + '</option>'); 
         }   
        } 
       }); 

      }  
      $("#material_select").prop("selectedIndex", 0);  
     } 
    }); 

Однако отображает все optgroups первые затем материалы

Что я делаю неправильно?

Answer 1

Snce вы используете ajax, чтобы запросить категории, которые они загружают асинхронно (только после загрузки данных), и поэтому в среднем время цикла добавляет другие группы выбора - так, чтобы они отображались в первую очередь. Кроме того, вы добавляете опции к select, а не к optgroup, что было бы правильным способом сделать это.

Так что я бы сделать эти изменения:

Вместо петли for() используйте $.each(cat_data, function() { ... })

Создать ссылку на группу опц.

var optgroup = $('<optgroup label=' +cat_data[cat_i].cat_displayname+ '>'); 
sel.append(optgroup); 

Затем, когда второй Аякс нагрузка, добавьте option тегов к группе оца.

optgroup.append('<option value="' + data[i].value + '">' + data[i].displayname + '</option>'); 

Это достигается несколькими вещами. Он создает область, в которой optgroup может поддерживаться посредством закрытия, и он правильно добавляет опцию в группу опций.