Best way to populate a <SELECT> box with TimeZones
<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>
