JSFiddle - React, Tailwind, and code Playground

by relez

HTML

<select name="demo3" id="demo3" class="f-dd"></select>

JavaScript

var json = [
    {"America":[{"id":1,"name":"Atlanta"},{"id":2,"name":"Boston"},{"id":3,"name":"Chicago"},{"id":4,"name":"Los Angeles"},{"id":5,"name":"New York"},{"id":6,"name":"San Francisco"}]},
    {"Europe":[{"id":7,"name":"Berlin"},{"id":8,"name":"London"},{"id":9,"name":"Paris"}]},
    {"Asia":[{"id":10,"name":"Shanghai"},{"id":11,"name":"Singapore"},{"id":12,"name":"Tokyo"}]}
    ];
var $select = $("#demo3");
                               
$.each(json, function(i, optgroups) {
    $.each(optgroups, function(groupName, options) {
        var $optgroup = $("<optgroup>", {label: groupName});
        $optgroup.appendTo($select);
        $.each(options, function(j, option) {
            var $option = $("<option>", {text: option.name, value: option.id});
            $option.appendTo($optgroup);
        });
    });
});