Select into ul list

HTML

<select class="filter">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

CSS

ul.list {
    display:none;
    margin:0;
    padding:0;
}
ul.list li {
    display: inline;
    list-style-type: none;
}
ul.list li.active a{
    display:none;
}
@media(min-width:482px) {
    ul.list {
        display:inline-block;
    }
    select.filter {
        display:none;
    }
}

JavaScript

$('select.filter').after('<ul class="list"></ul>');
$('select.filter option').each(function () {
    $('ul.list').append('<li><a href="#" data-value="' + $(this).val() + '">' + $(this).text() + '</a></li>');
});

//set first item as active on ready
$('ul.list li:eq(0)').addClass('active');

// set active to selction and sync

// update dropdown when links selected
$('ul.list > li > a').click(function(){
   $('ul.list > li').removeClass('active');
   $(this).parent().addClass('active');
	var e =  $(this).parent().index();
   $('select.filter option:eq('+e+')').prop('selected', true);
});
// update list when dropdown selected
$('select.filter').change(function() {
	var e =  $('option:selected', this).index();
    $('ul.list > li').removeClass('active');
    $('ul.list > li:eq('+e+')').addClass('active');
});