How to convert ul/li (unordered list) into Dropdown using jquery

If you want to convert your ul/li into dropdown list, you can do it easily using jquery. If you have responsive web page and you want to convert your menu which is in ul/li structure and want to change in dropdown for small screen or mobile screen than use following jquery solution.

Suppose you have menu structure as:

<div class="menu">
<ul class="myclass">

        <li><a href="one.php">one</a></li> 

        <li><a href="two.php">two</a></li> 

        <li><a href="three.php">three</a></li> 

        <li><a href="four.php">four</a></li> 

        <li><a href="five.php">five</a></li> 

        <li><a href="six.php">six</a></li>

</ul>

</div>

and want to convert into dropdown as:

<select>

       <option value="one.php">one</option> 

       <option value="two.php">two</option> 

       <option value="three.php">three</option> 

       <option value="four.php">four</option> 

       <option value="five.php">five</option> 

       <option value="six.php">six</option> 

</select>

<script>

jQuery(document).ready(function()
{

    jQuery(function()
   {

        jQuery('ul.myclass').each(function()
       {

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

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

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

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

               $select.append($option);

$select.click(function()

              {

                if(jQuery(this).val() != "#")

               {

window.location.href = jQuery(this).val();

               }

            });

        });

jQuery(".menu").append($select);

    });

jQuery("ul.myclass").hide());

  });
});

</script>

Read More

Set Dropdown Option value by name using jQuery

jQuery("#option_id").find("option:contains('Monday')").each(function()
{
if( jQuery(this).text() == 'Monday' )
{
jQuery(this).attr("selected","selected");
 }
});

Read More