Question

Is it possible for this jQuery code to run as a standalone javascript? This is the only javascript I’d like to use in my project so I’d prefer not to load the entire jquery library just for this 1k script.

//chris coyier's little dropdown select-->

$(document).ready(function() {

//build dropdown
$("<select />").appendTo("nav.primary");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");  

// Populate dropdowns with the first menu items
$("div#brdmenu ul li a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav.primary select");
});

//make responsive dropdown menu actually work           
$("nav.primary select").change(function() {
    window.location = $(this).find("option:selected").val();
});

});

I’ve tried to find previous answers but most questions are for converting to jquery and not vice-versa 🙂

Answer 1

Here is something similar to market’s answer. I’m assuming you want to get all the links in UL elements inside the brdmenu element. If you only want the first link on the LI elements, just adjust the loop that gets them.

Also, this is not a good idea. Using select elements for links went out of fashion a long time ago, users much prefer real links. Also, when navigating the options using cursor keys in IE, a change event is dispatched every time a different option is selected so users will only get to select the next option before being whisked away to that location. Much better to add a “Go” button that they press after selecting a location.

The main change is to use an ID to get the nav.primary element, which I assume is a single element that you should be getting by ID already.

function doStuff() {

    function getText(el) {
      return el.textContent || el.innerText;
    }
    var div, link, links, uls;

    // Use an ID to get the nav.primary element
    var navPrimary = document.getElementById('navPrimary');

    // Create select element and add listener
    var sel = document.createElement('select');
    sel.onchange = function() {
      if (this.selectedIndex > 0) {  // -1 for none selected, 0 is default
        window.location = this.value;
      }
    };

    // Create default option and append to select
    sel.options[0] = new Option('Go to...','');
    sel.options[0].setAttribute('selected','');

    // Create options for the links inside #brdmenu
    div = document.getElementById('brdmenu');
    uls = div.getElementsByTagName('ul');

    for (var i=0, iLen=uls.length; i<iLen; i++) {
      links = uls[i].getElementsByTagName('a');

      for (var j=0, jLen=links.length; j<jLen; j++) {
        link = links[j];
        sel.appendChild(new Option(getText(link), link.href));
      }
    }

    // Add select to page if found navPrimary element
    if (navPrimary) {
      navPrimary.appendChild(sel);
    }
}

window.onload = doStuff;

It’s only 28 lines of actual code, which is only 10 more than the original, doesn’t require any supporting library and should work in any browser in use (and most that aren’t).