如何将第三方选择框合并为一个？

I have third party search gadget on my WordPress website, I want to marge Region & Location dropdown into one.

Region Tab Code as below:

<div class="regionFilter">
   <span class="label"><label>Region</label></span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="Bali">Bali</option>
         <option value="Thailand">Thailand</option>
      </select>
   </span>
</div>

Location Tab Code as below:

<div class="locationsFilter">
   <span class="label"><label>Location</label></span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="Patong">Patong</option>
         <option value="Pattaya">Pattaya</option>
         <option value="Seminyak">Seminyak</option>
         <option value="Ubud">Ubud</option>
         <option value="Uluwatu">Uluwatu</option>
      </select>
   </span>
</div>

After Merging Region data into location filter I need final result something like below code. So, it'll be a grouping region as location wise.

<div class="locationsFilter">
   <span class="label"><label>Location</label></span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="Bali">--- Bali ---</option>
         <option value="Seminyak">Seminyak</option>
         <option value="Ubud">Ubud</option>
         <option value="Uluwatu">Uluwatu</option>
         <option value="Thailand">--- Thailand ---</option>
         <option value="Patong">Patong</option>
         <option value="Pattaya">Pattaya</option>
      </select>
   </span>
</div>

I have no access on that third party code everything what I have to do is using wordpress, php, javascript and jquery