Grouper la valeur de l'option par jQuery

Question

Comment grouper option value. ici est mon HTML

<select id="kota"> </select> 

et mon JS

var $sel = $('select#kota'); 
availableTags.forEach(function(tag) { 
    $sel.append('<optgroup label="'+tag.area+'"><option value="'+tag.stationcode +'">'+ tag.label +'</option></optgroup>'); 
}); 

Je veux séparer 'label' pour Jakarta et Bandung. Toute aide corporelle? ou une suggestion? Voici mon code complet dans jsfiddle. https://jsfiddle.net/dedi_wibisono17/u1be7gkq/7/

Je veux attendre comme ça

Merci

Answer 1

Que diriez-vous de cette solution. J'espère que cela aide :)!

$(document).ready(function(){ 
 
     
 
var availableTags = [{ 
 
    label: "Bandung - Bandung (BD)", 
 
    area: "Bandung", 
 
    station: "Bandung", 
 
    stationcode: "BD" 
 
}, { 
 
    label: "Bandung - Cicalengka (CCL)", 
 
    area: "Bandung", 
 
    station: "Cicalengka", 
 
    stationcode: "CCL" 
 
}, { 
 
    label: "Bandung - Cikadongdong (CD)", 
 
    area: "Bandung", 
 
    station: "Cikadongdong", 
 
    stationcode: "CD" 
 
}, { 
 
    label: "Jakarta - Gambir (GMR)", 
 
    area: "Jakarta", 
 
    station: "Gambir", 
 
    stationcode: "GMR" 
 
}, { 
 
    label: "Jakarta - Jakarta Kota (JAKK)", 
 
    area: "Jakarta", 
 
    station: "Jakarta Kota", 
 
    stationcode: "JAKK" 
 
}, { 
 
    label: "Jakarta - Jatinegara (JNG)", 
 
    area: "Jakarta", 
 
    station: "Jatinegara", 
 
    stationcode: "JNG" 
 
}]; 
 

 
var bandungArray = []; 
 
var jakartaArray = []; 
 
var output1 = []; 
 
var output2 = []; 
 

 
for(var i = 0 ; i < availableTags.length; i++){ 
 
\t if((availableTags[i].label).indexOf("Bandung") !== -1){ 
 
\t \t bandungArray.push(availableTags[i]); 
 
\t } 
 
\t else{ 
 
\t \t jakartaArray.push(availableTags[i]); 
 
\t } 
 
} 
 

 
bandungArray.forEach(function(tag) { 
 
\t output1.push('<option value="'+ tag.stationcode +'">'+ tag.label +'</option>'); 
 
}); 
 
jakartaArray.forEach(function(tag) { 
 
\t output2.push('<option value="'+ tag.stationcode +'">'+ tag.label +'</option>'); 
 
}); 
 

 
$('#kota').html("<optgroup label='Bandung'>"+output1.join('') + "<optgroup label='Jakarta'>"+output2.join('')); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<select id="kota"> 
 
</select>