Low Yearly Archives - Select year from a drop-down menu

Question

I would like to create a yearly archives for my blog in this format:

A drop-down menu with all the years, with the current year selected. When a year is selected, it show up a list with all the months that have entries in that year. When another year is selected, the months list change automatically, and so on.

I used Low Yearly Archives with this format:

<select name="year">
{exp:low_yearly_archives channel="blog" start_month="1" status="not closed" sort="desc"}
<option value="{year}">{year}</option>
{/exp:low_yearly_archives}
</select>
{exp:low_yearly_archives channel="blog" start_month="1" status="not closed" sort="desc"}
<div>
{months}
<div>
<a href="{path='blog'}/{year}/{month_num}/" title="{num_entries} entries in {month} {year}">{month_short}</a>
</div>
{/months}
</div>
{/exp:low_yearly_archives}

How can I show only the months related to the year selected?

I thank all those who can help me.

Answer 1

Try outputting a regular list with LYA and use JavaScript to generate the drop-down based on that list. That is behaviour that falls outside of the scope of LYA, to be honest. But with the output it can generate, and some creative JS, creating that behaviour shouldn't be too difficult.

Answer 2

I resolved using JS.

Here's my updated HTML with new id and classes added:

<select name="year" id="choose_year">
{exp:low_yearly_archives channel="blog" start_month="1" status="not closed" sort="desc"}
<option value="{year}">{year}</option>
{/exp:low_yearly_archives}
</select>
{exp:low_yearly_archives channel="blog" start_month="1" status="not closed" sort="desc"}
<div>
{months}
<div class="month year{year}">
<a href="{path='blog'}/{year}/{month_num}/" title="{num_entries} entries in {month} {year}">{month_short}</a>
</div>
{/months}
</div>
{/exp:low_yearly_archives}

and here's my script:

$(document).ready(function(){
var currentYear = (new Date).getFullYear();
$(".month").not(".year" + currentYear).hide();
$("#choose_year").change(function () {
var choose_year = $("#choose_year").val();
$(".monthg").not(".year" + choose_year).hide();
$(".year" + choose_year).show();
});
});