When using Foundation Sites Tabs component, for each tab component, create a select list that stays in sync with tabs.

foundation.tabsToSelect.js

!function ($) {
  // Always use strict mode to enable better error handling in modern browsers.
  "use strict";
  
  // For every foundation tab container, create a select list that stays in sync with tabs
  $(document).ready(function() {

    // Get all tabs on page
    var $allTabs = $('.f-tabs');

    // For each tab element on page
    $allTabs.each(function() {

      var $select,
        $selectHolder,
        $tabs = $(this);

      // Create the select holder above the tabs
      $selectHolder = $(document.createElement('div')).addClass('select-holder').insertBefore($tabs);
      // Create the select element
      $select = $(document.createElement('select')).addClass('link-select');
      // Append select element to holder
      $selectHolder.append($select);

      // Iterate through tabs, and foreach tab, create a select option
      $('>li a', $tabs).each(function() {
        var option = $(document.createElement('option'))
          .appendTo($select)
          .val($(this).attr('href'))
          .html($(this).html());
      });

      // Set select to initial active tab (in case of deep linking)
      $select.val($('.is-active a', $tabs).attr('href'));

      // Bind change event to select proper tab
      $('.link-select').bind('change', function () {
        var href = $(this).val(); // get selected value
        $('a[href$="'+href+'"]', $tabs).trigger('click');
        return false;
      });

      // Add toggle callback to keep select in sync with tabs
      $tabs.on('change.zf.tabs', function(event,tab) {
        if ($select.val() != $('a', tab).attr('href')) {
          $select.val($('a', tab).attr('href'));
        }
      });

    });

  });
  
}(jQuery);