<optgroup> с JSON в цикле $ .each

Question

Я пытаюсь разобрать файл JSON таким образом, что subsectors JSON показаны в <optgroup label=""> (не хотите, чтобы их можно было выбрать).

У меня есть этот файл в формате JSON:

{ 
    "sectors": [ 
    { 
     "title": "Business, Finance & Technology", 
     "subsectors": [ 
     { 
      "title": "Finance and insurance", 
      "industries": [ 
      {"name": "Retail banking"}, 
      {"name": "Insurance"}, 
      {"name": "Investment banking"} 
      ] 
     }, 
     { 
      "title": "Business Services", 
      "industries": [ 
      {"name": "Accounting & Audit"}, 
      {"name": "Recruitment"}, 
      {"name": "Legal services"} 
      ] 
     } 
     ] 
    }, 
// extra code omitted for brevity 

И я заселить <select> варианты с этим:

// populate <select> with available choices 
$.getJSON('models/industries.json', function (data) { 
    $.each(data.sectors, function (i, sector) { 
     $.each(sector.subsectors, function (i, subsector) { 
      $('<option />').html('#' + subsector.title).appendTo('.js-industries-select'); 

      $.each(subsector.industries, function (i, industry) { 
       $('<option />').html(industry.name).appendTo('.js-industries-select'); 
      }) 
     }); 
    }); 
}); 

Тогда я называю Избранный плагин для изменения <select> в динамическом вводе. Вы можете видеть, какие элементы я хочу, чтобы label был помечен #.

Смотрите демо здесь: http://jsfiddle.net/qaczD/

я в основном нужно создать <optgroup> до последнего $.each, назначить label="" в subsector.title, а затем заполнить эту группу с выборами. Как только последний $.each закончит, закройте «как-то» и запустите новый.

Любые идеи?

Answer 1

Try thisone: http://jsfiddle.net/qaczD/2/

// populate <select> with available choices 
$.getJSON('http://dl.dropboxusercontent.com/u/48552248/websites/timewasted/new/industries.json', function (data) { 
    $.each(data.sectors, function (i, sector) { 
     $.each(sector.subsectors, function (i, subsector) { 

      var optGroup=$('<optgroup />').attr('label','#' + subsector.title).appendTo('.js-industries-select'); 
      $.each(subsector.industries, function (i, industry) { 
       // if (industry.name.search(regex) != -1) { 
        $(optGroup).append($('<option />').html(industry.name)); 
       // } 
      }) 
     }); 
    }); 
    console.log('yes'); 
}); 

// call chosen plugin that prettifies the Industry options 
setTimeout(function() {$(".js-industries-select").chosen({ 
    placeholder_text_multiple: 'e.g. Retail banking…' 
});}, 1000); 

Answer 2

The solution

$.each(sector.subsectors, function (i, subsector) { 
     var group = $('<optgroup />').attr('label','#' + subsector.title).appendTo('.js-industries-select'); 

     $.each(subsector.industries, function (i, industry) { 
      $('<option />').html(industry.name).appendTo(group); 
     }) 
    });