Ul LI to Select Dropdown

by Dhruvang Gajjar

HTML

<ul>
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
  <li><a href="#section4">Section 4</a></li>
  <li><a href="#section5">Section 5</a></li>
</ul>

JavaScript

// ChampDrop Plugin //
(function($) {
  $.fn.champdrop = function(options) {
    var settings = $.extend({
      first: "Choose Option",
    }, options);
    var line = settings.first;
    console.log(line);

    $this = $(this);
    var texts = [];
    var values = [];

    $this.find("li").each(function(i, el) {
      texts.push($(el).find('a').text());
      values.push($(el).find('a').attr("href"));
    });

    $this.after("<select class='champdp " + $this.attr("class") + "'><option>" + line + "</option></select>");

    for (var i = 0; i < texts.length; i++) {
      $(".champdp").append('<option value="' + values[i] + '">' + texts[i] + '</option>')
    }
    $this.remove();

    $(".champdp").change(function() {
      window.location.href = $(this).val();
    })

  }
}(jQuery));

// Binding Code // 


$('ul').champdrop({
	first : "Choose Color"
});