title: Filter an array by part of data
body: <p>I want to make a country and town related select</p>
  
  <p>The country data is</p>
  
  <pre><code>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":"大雅區"}
  ]
  </code></pre>
  
  <p>and the HTML code is</p>
  
  <pre><code>&lt;select id="country"&gt;&lt;/select&gt;
  &lt;select id="town"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I can't change the JSON data format</p>
  
  <p>and these two data's relation is</p>
  
  <p>country id = XXX</p>
  
  <p>town id = XXXOO</p>
  
  <p>how can I filter the match array to dynamic insert options to town select</p>
  
  <p>I try to write some script</p>
  
  <pre><code>var counties_option = '';
  
  for (var i = 0; i &lt; arr_country.length; i++) {
  counties_option += '&lt;option value="' + arr_country[i].id + '"&gt;' + arr_country[i].name + '&lt;/option&gt;';
  }
  
  $('#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 &lt; filtered_arr.length; j++) {
  town_option += '&lt;option value="' + filtered_arr[j].id + '"&gt;' + filtered_arr[j].name + '&lt;/option&gt;';
  }
  
  $('#town').append(town_option)}).trigger('change');
  </code></pre>
  
  <p>this is my jsFiddle practice => <a href="http://jsfiddle.net/baibai/x1qh4b0t/16/" rel="nofollow noreferrer">jsFiddle practice</a></p>