按部分数据过滤数组

我想选择与国家和城镇相关的

国家数据是

var arr_country=[
  {"id": 100,"name":"台北市"},
  {"id": 200,"name":"新北市"},
  {"id": 300,"name":"桃園市"},
  {"id": 400,"name":"新竹縣"},
  {"id": 500,"name":"台中市"}
  ]

var arr_town=[
  {"id": 10011,"name":"中正區"},
  {"id": 10022,"name":"信義區"},
  {"id": 20011,"name":"板橋區"},
  {"id": 20022,"name":"永和區"},
  {"id": 30011,"name":"龜山區"},
  {"id": 30022,"name":"八德區"},
  {"id": 40011,"name":"新豐鄉"},
  {"id": 40022,"name":"湖口區"},
  {"id": 50011,"name":"北屯區"},
  {"id": 50022,"name":"大雅區"}
]

HTML代码是

<select id="country"></select>
<select id="town"></select>

我无法更改JSON数据格式

这两个数据的关系是

国家/地区编号= XXX

城镇编号= XXXOO

如何将匹配数组过滤为动态插入选项以进行城镇选择

我尝试写一些脚本

var counties_option = '';

for (var i = 0; i < arr_country.length; i++) {
counties_option += '<option value="' + arr_country[i].id + '">' + arr_country[i].name + '</option>';
}

$('#country')
.append(counties_option)
.on('change',function(){
$('#town').empty();

var selected_counties=this.value
var filtered_arr=arr_town.filter(function(item){
return item.id==selected_counties;
});

var town_option = '';
for (var j = 0; j < filtered_arr.length; j++) {
town_option += '<option value="' + filtered_arr[j].id + '">' + filtered_arr[j].name + '</option>';
}

$('#town').append(town_option)}).trigger('change');

这是我的jsFiddle练习=> jsFiddle练习