JSFiddle - React, Tailwind, and code Playground

HTML

<select name="select_projects" id="select_projects">
    <option value="">project.xml</option>
    <optgroup label="client1">
        <option value="">project2.xml</option>
    </optgroup>
    <optgroup label="client2">
        <option value="">project5.xml</option>
        <option value="">project6.xml</option>
        <optgroup label="client2_a">
            <option value="" style="margin-left:23px;">project7.xml</option>
            <option value="" style="margin-left:23px;">project8.xml</option>
        </optgroup>
        <option value="">project3.xml</option>
        <option value="">project4.xml</option>
   </optgroup>
   <option value="">project0.xml</option>
   <option value="">project1.xml</option>
</select>

JavaScript

// (1)
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;

var xhr = new XHR();

// (2) запрос на другой домен :)
xhr.open('GET', 'http://pecom.ru/ru/calc/towns.php', true);

xhr.onload = function() {
var x = this.responseText;
var r = /\\u([\d\w]{4})/gi;
x = x.replace(r, function (match, grp) {
    return String.fromCharCode(parseInt(grp, 16)); } );
x = JSON.parse(unescape(x));
var myselect="";


for (var key in x) {
 if (Object.prototype.toString.call(x[key])=="[object Object]") {
   console.log(key);
    myselect=myselect+" <optgroup label='"+key+ "'>";
     
     for (var i in x[key]) { 
    console.log(i+':'+x[key][i])
     myselect=myselect+"<option value='"+i+"'>"+x[key][i]+"<\/option>";
          }
  
     myselect=myselect+"<\/optgroup>"
     
 }  
  else{  console.log(key+':'+x[key])
      myselect=myselect+"<option value='"+key+"'>"+x[key]+"<\/option>";
      
      }
   document.getElementById('select_projects').innerHTML=myselect; 
    
}
}

xhr.onerror = function() {
  alert( 'Ошибка ' + this.status );
}

xhr.send();