JavaScript / jQuery, what would be the best option here ??

//Problem: Menu looks bad on smaller browser widths and then on smaller devices.

//Solution: To hide the text links and swap them out with a more appropriate navigation.

//Create a select and append #menu
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");

  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")){
     $option.prop("selected", true);
     }
  //Options value is the href
  $option.val($anchor.attr("href"));
  //Options text is the text of link
  $option.text($anchor.text());
  //Append option to selecet
  $select.append($option);

});

//Bind a change lister to the select
$select.change(function(){
  //Go to the selects location
  window.location = $select.val();
});

$(document).ready(function() {
    $(".mobile-heading").on('click', function(){
        $(".main-menu").slideToggle("fast");
    });
});