Monday, September 26, 2022

How to convert ul li to dropdown menu using js.

Code:- 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="jquery.min.js"></script>

</head>

<body>

<ul class="selectdropdown">

    <li><a href="one.html" target="_blank">one</a></li>

    <li><a href="two.html" target="_blank">two</a></li>

    <li><a href="three.html" target="_blank">three</a></li>

    <li><a href="four.html" target="_blank">four</a></li>

    <li><a href="five.html" target="_blank">five</a></li>

    <li><a href="six.html" target="_blank">six</a></li>

    <li><a href="seven.html" target="_blank">seven</a></li>

</ul>

 

</body>

<script type="text/javascript">

    $(function() {

    $('ul.selectdropdown').each(function() {

        var $select = $('<select />');

        $(this).find('a').each(function() {

            var $option = $('<option />');

            $option.attr('value', $(this).attr('href')).html($(this).html());

            $select.append($option);

        });

        $(this).replaceWith($select);

    });

});

</script>

</html>


 

No comments:

Post a Comment

If you have any problem please let me know.