Convert ul li to select option jQuery.

In this tutorial we learn how can we convert a ul and li to select and options and keep the classes using jQuery. Convert Unordered List to Select Navigation with jQuery. Convert a List into a Select Dropdown using jQuery. $(function() { $(‘ul.selectdropdown’).each(function() { var $select = $(‘…

HTML

<ul class="listMenu">
    <li><a href="mercedes.html">Mercedes</a></li>
    <li><a href="volvo.html">Volvo</a></li>
    <li><a href="tesla.html">Tesla</a></li>
    <li><a href="mercedes.html">Mercedes</a></li>
</ul>

JavaScript

<script>
$(function() {
    $('ul.listMenu').each(function() {
    var $select = $('<select />');

    $select.attr('onChange', 'window.document.location.href=this.options[this.selectedIndex].value;');

    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        $select.append($option);
    }); 
    
    $(this).replaceWith($select); });
});
</script>

Add class to select tag for better look and feel design for Select option. Default Bootstrap Class for form filed is .form-control

$select.attr('onChange', 'window.document.location.href=this.options[this.selectedIndex].value;').addClass('form-control');

---

Learn HTML/CSS from W3 School Website

• JavaScript