title: How to create an object array for a country list using html dom?
body: <p>Got stuck with this one for awhile now. Any help would be appreciated.</p>
  
  <p>I am making a select element with country options for my website. I have a javascript file with 2-object array country list (I can't specify the options in html file, only use this js file):</p>
  
  <pre><code>var country_list = [
  {"country_code": "CA", "country_name": "Canada"},
  {"country_code": "UK", "country_name": "United Kingdom"},
  {"country_code": "AU", "country_name": "Australia"},
  {"country_code": "NZ", "country_name": "New Zealand"} ];
  </code></pre>
  
  <p>And then here is my html file:</p>
  
  <pre><code>&lt;form name="form1"&gt;    
  Country &lt;select value="country_code" onclick="select_country()"&gt;&lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Country names have to be showed on the dropdown list, while the values for the options will be 2-letter country codes. Plus, Australia has to be selected by default.</p>
  
  <p>This is what I have been up to so far:</p>
  
  <pre><code>function select_country(){
  var select = document.form1.createElement("SELECT");
  select.setAttribute("id","mySelect");
  document.form1.body.appendChild(select);
  var option = document.form1.createElement("option");
  option.setAttribute("value", "Canada");
  var text = document.createTextNode("CAN");
  option.appendChild(text);
  document.form1.getElementById("mySelect").appendChild(option);
  }
  </code></pre>