title: Best way to populate a <SELECT> box with TimeZones
body: <p>I need to display a timezone selector as a user control, which always seems easier than it really is.  Internally, I store everything with a DateTimeZone Identifier, as that seems to be the smartest way to have the level of accuracy I need, as this project bridges real-world times as it is tied to terrestrial media.</p>
  
  <p>What I don't want to do is present a select box with 300+ time zones, nor do I want to create faked timezone offsets with something like 'UTC-8' (which loses not only DST info, but the actual dates that the DST falls on).</p>
  
  <p>In the end, I'll need a select with options containing the proper TZD Identifiers, something like this (the bracketed #s aren't necessary, just for potential end-user illustration):</p>
  
  <pre><code>&lt;select&gt;
  &lt;option value="America/Los_Angeles"&gt;Los Angeles [UTC-7 | DST]&lt;/option&gt;
  ...
  &lt;/select&gt;
  </code></pre>
  
  <p>Does anyone have any pointers for building this list?  All of the solutions I've googled have been problematic in one way or another.</p>
  
  <hr>
  
  <p>I've added a bounty in case that might entice somebody to share a nicer answer with us.  : )</p>