How to display items from date range selected via select element in ExpressionEngine

In ExpressionEngine I have a news template that displays news items. I am trying to implement a select element that allows the user to select a particular year and then see only news items entered within that year.

Here is my code so far:

<select name="select_year">
            <option value="">Select year</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
        </select>   

                    {exp:channel:entries
                channel="news-items"
                disable="categories|category_fields|trackbacks"
                dynamic="off"
                require_entry="yes"
                sort="desc"
                search:news-item-featured="featured"
                limit="1"}

                <div align="left">
                  <h2 align="center" style="margin-top: 0pt; margin-bottom: 0pt;">{title}</h2>
                </div>

                {if news-item-main-image}
                    {exp:imgsizer:size src="{news-item-main-image}" width="352"}
                        <p style="margin-top: 0pt;"><img align="middle" width="352" src="{sized}"></p>
                    {/exp:imgsizer:size}
                {/if}

                {news-item-intro-text}

                <p><a href="{title_permalink='news-item'}">Click here to read the full story. </a></p>

            {/exp:channel:entries}
<br><br>

            <h3 style="margin-top: 0pt;">News History</h3>
            <ul>

            {exp:channel:entries
                channel="news-items"
                disable="categories|category_fields|trackbacks"
                dynamic="off"
                require_entry="yes"
                limit="19"
                paginate="bottom"
                paginate_base="/news"}

                    <li><p></p><h3><a href="{title_permalink='news-item'}">{title}</a></h3>
                    <input type="hidden" value="" name="news_id">{entry_date format="%n/%j/%Y"}&nbsp;-&nbsp;</li>

                {paginate}

                    </ul>
                    <p><br />

                        {pagination_links}

                        {current_page} of {total_pages}
                     </p>

                {/paginate}

            {/exp:channel:entries}

The code displays all news items currently. This consists of a featured news item at the very top and a hyperlinked list of all previous news items beneath it.

Is there a way I can specify a variable to store the selected value from the select element at the very top so that I can use it with the news-items below? Or is there perhaps a better way?

Solution

There are a couple of ways to go about this (just like most tasks in EE). You could look into using EE's dynamic parameters feature. EE's dynamic parameters allow your users to select from various options (including year), but they also disable caching for the template and don't update the URL.

You could also use URL segments to control which year is being displayed. This is much more common than using dynamic parameters. Let's say that your News index page lives at http://site.com/news. You could trigger an "archive" feature by adding a second URL segment, like so: http://site.com/news/archive.

Then, in your template you can use simple conditionals to trigger certain code for the archive layout. Here's what your page would look like with this approach (important changes in bold):

{exp:channel:entries
    channel="news-items"
    disable="categories|category_fields|trackbacks"
    dynamic="off"
    require_entry="yes"
    sort="desc"
    search:news-item-featured="featured"
    limit="1"
    {if segment_2 == 'archive'}year="{segment_3}"{/if}
}
    <div align="left">
        <h2 align="center" style="margin-top: 0pt; margin-bottom: 0pt;">{title}</h2>
    </div>
    {if news-item-main-image}
        {exp:imgsizer:size src="{news-item-main-image}" width="352"}
            <p style="margin-top: 0pt;"><img align="middle" width="352" src="{sized}"></p>
        {/exp:imgsizer:size}
    {/if}
    {news-item-intro-text}
    <p><a href="{title_permalink='news-item'}">Click here to read the full story.</a></p>
{/exp:channel:entries}

{exp:channel:entries
    channel="news-items"
    disable="categories|category_fields|trackbacks"
    dynamic="off"
    require_entry="yes"
    limit="19"
    paginate="bottom"
    paginate_base="/news"
    **{if segment_2 == 'archive'}year="{segment_3}"{/if}**
}
    {if count == '1'}
        <h3>News History **{if segment_2 == 'archive'} for {segment_3}{/if}**</h3>
        <ul>
    {/if}
        <li>
            <h3><a href="{title_permalink='news-item'}">{title}</a></h3>
            <input type="hidden" value="" name="news_id">{entry_date format="%n/%j/%Y"}&nbsp;-&nbsp;
        </li>
    {if count == total_results}
        </ul>
    {/if}

    {paginate}
        <p>
            {pagination_links}
            {current_page} of {total_pages}
        </p>
    {/paginate}

{/exp:channel:entries}

Please note that I simply added a few {if segment_2 == 'archive'}{/if} conditional tags to your code.

Additionally, you could ditch the select dropdown menu and use Low's free Yearly Archives plugin for EE. This plugin gives you lots of flexibility for rendering yearly/monthly archive links. If you really want to keep the select menu, you could add a dash of JavaScript into the mix to have each option redirect the user to the proper archive URL.