title: Display table row based on the selected option of Select html tag
body: <p>So I have tried to display the content of a table based on the country of a user. basically if a user selects the united states as option, he gets a table row containing US data displayed.. I used a select with options, and every option has the domain extension of country as a value ( for example, for Brazil option, the value is br : <code>&lt;option value="br"&gt;Brazil&lt;/option&gt;</code>, plus the table row for it has the same option value as an ID ( <code>&lt;tr id="br" style="display: none;"&gt;..&lt;/tr&gt;</code> )</p>
  
  <p>Is there any script to display a country data once the user selects that country in the options ?</p>
  
  <p>Thank you, and here's my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select id="data"&gt;
    &lt;option value="#"&gt;Select a country ..&lt;/option&gt;
    &lt;option value="us"&gt;United States&lt;/option&gt;
    &lt;option value="es"&gt;Spain&lt;/option&gt;
   &lt;!-- more countries --&gt;
  &lt;/select&gt;
  
  
  &lt;div id="container"&gt;
  
  &lt;table border="1"&gt;
   &lt;tr&gt;
    &lt;td&gt; Country &lt;/td&gt;
    &lt;td&gt; Chance&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr id="us"  style="display: none;"&gt;
    &lt;td&gt; United States &lt;/td&gt;
    &lt;td&gt; 2.02 % &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr id="es" style="display: none;"&gt;
    &lt;td&gt; Spain &lt;/td&gt;
    &lt;td&gt; 2.12 % &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried the following:</p>
  
  <p><strong>Jquery:</strong></p>
  
  <pre><code>$('#data').change(function() {
      $('tr#($(this).val())').css('display','block');
  });
  </code></pre>
  
  <p>Regards,</p>
  
  <p>Thank you!</p>