Table to select dropdown

Question

Not really sure where to start with this, here is the design:

I have a table being dynamically populated using views in drupal. The table has one column for language, and a corresponding link to a file for whatever language there is a translation for on the node.

It outputs like this:

<table class="views-table cols-2">
<thead>
     <tr>
     <th class="views-field views-field-language views-align-left">Language</th>
     <th class="views-field views-field-download views-align-right"></th>
     </tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-language views-align-left">English</td>
<td class="views-field views-field-download views-align-right"><a href="/file/26/download?token=c3e7cLRldQolkKcDvhceXCKuPJwhSpYMfObOxZZFBFY">Download</a></td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-language views-align-left">Spanish</td>
<td class="views-field views-field-download views-align-right"><a href="/file/26/download?token=c3e7cLRldQolkKcDvhceXCKuPJwhSpYMfObOxZZFBFY">Download</a></td>
</tr>
</tbody>
</table>

From this I want a dropdown listing the languages, and one download link that changes depending on the language selected. Jquery or javascript solution anyone?

Ive found the following SO topic with a similar request, only my request needs to dynamically update the download link.

Answer 1

Sir, I leave the fine-tuning and styling up to you.

Here's the jsfiddle

var meta = {}

function updateDownLink () {
  var selected = $(this).context.selectedOptions[0].text;
  $('#download').attr('href', meta[selected]);
}

var select = $(document.createElement('select')).insertBefore($('.views-table tbody').hide());
select.change(updateDownLink);

$('.views-table tbody tr').each( function(r){
  optionText = $(this)[0].cells[0].innerText;
  meta[optionText] = $(this).find('a')[0].href.substr(7);
  option = $(document.createElement('option')).appendTo(select).html(optionText)
})

var a = $(document.createElement('a')).insertAfter($('.views-table'));
$(a).attr('href', meta['English']).attr('id', 'download').text('Download');