I want to ask about for each here's my HTML

<select class="namaKota" id="fromCity"></select>

my data in js

var listCity =
  {
    "Popular":
    [
       {"cityname":"London","code":"LDN"},
       {"cityname":"Rome","code":"ROM"},
       {"cityname":"Madrid","code":"MDR"}
    ],
     "Germany":
    [
       {"cityname":"Hamburg", "code":"HMB"},
       {"cityname":"Frankfurt", "code":"FRN"}
     ]
}

and here's my JS

var a = $("select#fromCity").val();
listKota.forEach(function(e){
   a.append('<option value="'+ listCity.code +'">'+ listCity.cityname +'</option>');});

I want be like this image. How can I create using for each?

Here's my jsfiddle. / Anybody help? Thankyou

I want to ask about for each here's my HTML

<select class="namaKota" id="fromCity"></select>

my data in js

var listCity =
  {
    "Popular":
    [
       {"cityname":"London","code":"LDN"},
       {"cityname":"Rome","code":"ROM"},
       {"cityname":"Madrid","code":"MDR"}
    ],
     "Germany":
    [
       {"cityname":"Hamburg", "code":"HMB"},
       {"cityname":"Frankfurt", "code":"FRN"}
     ]
}

and here's my JS

var a = $("select#fromCity").val();
listKota.forEach(function(e){
   a.append('<option value="'+ listCity.code +'">'+ listCity.cityname +'</option>');});

I want be like this image. How can I create using for each?

Here's my jsfiddle. https://jsfiddle/dedi_wibisono17/9u9uec8d/1/ Anybody help? Thankyou

• javascript
• jquery
• foreach
• html-select

• jsfiddle/4urrxzzp – Satpal Commented Nov 17, 2016 at 11:48

2 Answers 2

You need to create optGroup element with option element which needs to be added select element.

var select = $("select#fromCity");

//Iterate list City
for (var key in listCity) {
    var cities = listCity[key];

    //Create optGroup
    var optGroup = $('<optgroup/>', {
        label: key 
    })
    for (var i = 0; i < cities.length; i++) {
        //Create option and append to optGroup created above
        $('<option>', {
            value: cities[i].code,
            text: cities[i].cityname,
        }).appendTo(optGroup);
    }

    optGroup.appendTo(select);
}

var listCity = {
  "Popular": [
    { "cityname": "London", "code": "LDN" },
    { "cityname": "Rome", "code": "ROM" },
    { "cityname": "Madrid", "code": "MDR" }
  ],
  "Germany": [
    { "cityname": "Hamburg", "code": "HMB" },
    { "cityname": "Frankfurt", "code": "FRN" }
  ]
}

var select = $("select#fromCity");

//Iterate list City
for (var key in listCity) {
  var cities = listCity[key];

  //Create optGroup
  var optGroup = $('<optgroup/>', {
    label: key
  })
  for (var i = 0; i < cities.length; i++) {
    //Create option and append to optGroup created above
    $('<option>', {
      value: cities[i].code,
      text: cities[i].cityname,
    }).appendTo(optGroup);
  }

  optGroup.appendTo(select);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="fromCity"></select>

Updated Fiddle

The layout you have in your image uses <optgroup> elements to group the <option>. Therefore you need two loops; one to create the optgroups from the keys of the object, and another to populate the actual option within those groups. Try this:

var listCity = {
  "Popular": [
    { "cityname": "London", "code": "LDN" },
    { "cityname": "Rome", "code": "ROM" },
    { "cityname": "Madrid", "code": "MDR" }
  ],
  "Germany": [
    { "cityname": "Hamburg", "code": "HMB" },
    { "cityname": "Frankfurt", "code": "FRN" }
  ]
}

Object.keys(listCity).forEach(function(key) {
  var $group = $('<optgroup label="' + key + '"></optgroup>');

  listCity[key].forEach(function(obj) {
    $group.append('<option value="' + obj.code + '">' + obj.cityname + '</option>')
  })

  $('#fromCity').append($group);
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="fromCity"></select>