title: Converting unordered list(ul tag) navigation to dropdown navigation(select tag)
body: <p>Can you help me with converting unordered list navigation to dropdown navigation?</p>
  
  <p>Currently I use this script</p>
  
  <pre><code>  $(function() {
  
      if (document.getElementById("level-2")) {
          initElement("#level-2");
      }
      if (document.getElementById("level-3")) {
          initElement("#level-3");
      }
      if (document.getElementById("embedded-level-3")) {
          initElement("#embedded-level-3");
      }
  
  
      function initElement(element) {
          $("&lt;select /&gt;").appendTo(element);
  
          // Create default option "Go to..."
          $("&lt;option /&gt;", {
              "selected": "selected",
              "value"   : "",
              "text"    : "Go to..."
          }).appendTo("nav"+element+" select");
  
          $(element + " a").each(function() {
              var el = $(this);
              $("&lt;option /&gt;", {
              "value" : el.attr("href"),
  
              "text"  : el.text()
          }).appendTo(element + " select");
      });
  
          $(element + " select").change(function() {
              window.location = $(this).find("option:selected").val();
          });}
  });
  </code></pre>
  
  <p>This scripts converts this list of "li" tags to select>option tags dropdowns</p>
  
  <p>Active page is defined by <code>a.active(a class="active")</code>.</p>
  
  <p>Is it possible to change script to put link from class "active" and text from link on first position on dropdown menu select>option instead of "Go to..."?</p>
  
  <p><strong>Update</strong>
  To be clear, what I'm searching for.</p>
  
  <p>Need to find element with class 'active' from the list, put it on first position of select dropdown amd then put all other elements of list in select dropdwon</p>
  
  <p>From this</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="link1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="active"&gt;&lt;a href="link2" class="active"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="link3"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>To this</p>
  
  <pre><code>&lt;select&gt;
  &lt;option class="active" value="link2&gt;Link 2&lt;/option&gt;
  &lt;option value="link1&gt;Link 1&lt;/option&gt;
  &lt;option value="link3&gt;Link 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>