title: display:block not working on option tag
body: <p>UPDATE : I test my code on firefox and everything was alright but on chrome :|</p>
  
  <p>I have two different selecting drop lists . one for Province and another for cities.
  I want to let users first select their Province then i show them cities selection list which is only containing cities of selected Province . my idea was to achieve it this way :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="Province"&gt;
      &lt;option value = "1"&gt;Province1&lt;/option&gt;
      &lt;option value = "2"&gt;Province2&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id = "CityList"&gt;
      &lt;option value = "1"&gt;city1&lt;/option&gt;
      &lt;option value = "1"&gt;city2&lt;/option&gt;
      &lt;option value = "2"&gt;city3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>cities with value one are inside Province with value one</p>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$("#Province").change(function(){
     $("#CityList option").css({'display':'none'});
     var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
     $(id).css({'display':'block'});
  })
  </code></pre>
  
  <p>But the problem is none of the options will get visible again :|
  And i checked if i'm selecting correct option by changing font color of it</p>
  
  <p>I don't know why display : block is not working on them </p>