按 jQuery 对选项值进行分组

Grouping option value by jQuery

如何分组 option value。 这是我的 HTML

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

和我的 JS

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

我想 'label' 分开雅加达和万隆。有什么 body 帮助吗?或建议? 这是我在 jsfiddle 中的完整代码。 https://jsfiddle.net/dedi_wibisono17/u1be7gkq/7/

我想要这样的期望

谢谢

这个解决方案怎么样。希望对您有所帮助:)!

$(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++){
 if((availableTags[i].label).indexOf("Bandung") !== -1){
  bandungArray.push(availableTags[i]);
 }
 else{
  jakartaArray.push(availableTags[i]);
 }
}

bandungArray.forEach(function(tag) {
 output1.push('<option value="'+ tag.stationcode +'">'+ tag.label +'</option>');
});
jakartaArray.forEach(function(tag) {
 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>