Bounty Region Object

testing the bounty region object

HTML

<div class="select_wrapper" id="region_block">
<label for="region">Region</label>
<select id="region">
    <option value="x" id="region-x">Please select a country</option>
</select>  
</div>
<div class="select_wrapper" id="midregion_block">
<label for="midregion">Mid Region</label>
<select id="midregion">
    <option value="x" id="midregion-x">Please select a mid region</option>
</select> 
</div>
<div class="select_wrapper" id="subregion_block">
<label for="subregion">Sub Region</label>
<select id="subregion">
    <option value="x" id="subregion-x">Please select sub region</option>
</select> 
</div>

CSS

div.select_wrapper{display:block;margin:10px; padding:10px; border: 1px solid #eee;}

JavaScript

var Regions = [
        {
        "name": "United States",
        "id": 5145,
        "midregions": [
            {
            "id": 5147,
            "name": "Alabama",
            "subregions": [
                {
                "id": 5148,
                "name": "Anniston"},
                {
                "id": 5149,
                "name": "Birmingham"},
                {
                "id": 5150,
                "name": "Mobile/Dothan"},
                {
                "id": 5151,
                "name": "Montgomery"},
                {
                "id": 5152,
                "name": "Northern/Huntsville"},
                {
                "id": 5154,
                "name": "Tuscaloosa"}
            ]},
        {
            "id": 5153,
            "name": "Alaska",
            "subregions": [
                {
                "id": 5155,
                "name": "Anchorage"},
                {
                "id": 5156,
                "name": "Fairbanks/Interior"},
                {
                "id": 5157,
                "name": "Far North/Nome"},
                {
                "id": 5158,
                "name": "Juneau"},
                {
                "id": 6094,
                "name": "Southwest"}
            ]},
        {
            "id": 5159,
            "name": "Arizona",
            "subregions": [
                {
                "id": 5160,
                "name": "Flagstaff"},
                {
                "id": 5161,
                "name": "Phoenix"},
                {
                "id": 5162,
                "name": "Tucson"},
                {
                "id": 5163,
                "name": "Yuma"}
            ]}
        ]},
        
        {
        "name": "Canada",
        "id": 5455,
        "midregions": [
            {
            "id":5456 ,
            "name": "Alberta",
            "subregions": [
                {
                "id": 5457,
                "name": "Banff"},
             ...