title: JavaScript to create a dropdown list and get the selected value
body: <p>I need to add a dropdown list to a webpage.
  generally the HTML code is like this;</p>
  
  <pre><code>&lt;select id="au_1_sel" name="au_1_sel" class="searchw8"&gt;
      &lt;option value="AU" selected=""&gt;method1&lt;/option&gt;
      &lt;option value="FI"&gt;method2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>How can I use JavaScript to create a element like above.
  after I create this drop down list. I need to add it after a button.</p>
  
  <pre><code>var button = document.getElementById("button1");
  </code></pre>
  
  <p>and I already get the button element.
  Also, when the button is clicked, I want to know which option the people have choose in the dropdown list. How can I do that using JavaScript.</p>
  
  <p>I try this</p>
  
  <pre><code>var select = document.createElement("select");
  select.id = "wayToCalculate";
  //select.name="au_1_sel";
  //select.class=class="searchw8";
  
  var option1 = document.createElement("option");
  option1.value="1";
  option1.selected="";
  option1.innerHTML= "1";
  
  var option2 = document.createElement("option");
  option2.value="2";
  option2.innerHTML= "2";
  
  var option3 = document.createElement("option");
  option3.value="3";
  option3.innerHTML= "3";
  
  select.addChild(option1);
  select.addChild(option2);
  select.addChild(option3);
  
  $(select).insertAfter(button);
  </code></pre>
  
  <p>but when it comes to this.
      select.addChild(option1);</p>
  
  <p>chrome browser give me a error.</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function
  </code></pre>
  
  <p>It seems that addChild does not work here.</p>