How using 'for each' in select option?
<p>I want to ask about for each
here's my HTML </p>

<pre><code>&lt;select class="namaKota" id="fromCity"&gt;&lt;/select&gt;
</code></pre>

<p>my data in js</p>

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

<p>and here's my JS</p>

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

<p>I want be like this image. How can I create using for each?</p>

<p><a href="https://i.stack.imgur.com/Usp4c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Usp4c.png" alt="enter image description here"></a></p>

<p>Here's my jsfiddle. <a href="https://jsfiddle.net/dedi_wibisono17/9u9uec8d/1/" rel="nofollow noreferrer">https://jsfiddle.net/dedi_wibisono17/9u9uec8d/1/</a> Anybody help? Thankyou</p>