title: HTML select option show list after first select option selected
body: <p>I have this country table:</p>
  
  <pre><code>+----+-----------+
  | ID |  Country  |
  +----+-----------+
  |  1 | Indonesia |
  |  2 | Malaysia  |
  |  3 | Brunei    |
  +----+-----------+
  </code></pre>
  
  <p>and this form:</p>
  
  <pre><code>&lt;form action="search.php" method="post" accept-charset="utf-8"&gt;
  
      &lt;label&gt;From:&lt;/label&gt;
      &lt;select name="from_country"&gt;
          &lt;option value="1"&gt;Indonesia&lt;/option&gt;
          &lt;option value="2"&gt;Malaysia&lt;/option&gt;
          &lt;option value="3"&gt;Brunei&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;label&gt;To:&lt;/label&gt;
      &lt;select name="to_country"&gt;
          &lt;option value="1"&gt;Indonesia&lt;/option&gt;
          &lt;option value="2"&gt;Malaysia&lt;/option&gt;
          &lt;option value="3"&gt;Brunei&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Both of select option data is populated from country table in my database, what I want to do is:</p>
  
  <ol>
  <li><p>I want the 2nd select option (to_country) list is empty before the first one (from_country) is selected</p></li>
  <li><p>After the first one (from_country) is selected the 2nd select option (to_country) list only generated list that hasn't selected yet by first selected option (from_country). So its like when I choose Indonesia in the first select option (from_country), and Indonesia will not show in 2nd select option, except I changed the first one to another country.</p></li>
  </ol>
  
  <p>How to do that? Should I use php or jquery? Thank you</p>
  
  <p><strong>updated</strong></p>
  
  <p>here is my fiddle based on Mr. Patrick's answer</p>
  
  <p><a href="http://jsfiddle.net/yLLr6/1/" rel="nofollow">jsfiddle</a></p>