convert ul to select (map method)

by meetaaronsilber

HTML

<nav>
<ul id="sitemap">
    <li><a href="www.google.com">House</a></li>
    <li><a href="www.google.com">Cat</a>
        <ul>
            <li><a href="www.google.com">Kite</a></li>
        </ul>
    </li>
    <li><a href="www.google.com">Truck</a></li>
    <li><a href="www.google.com">Apple</a></li>
    <li><a href="www.google.com">Dude</a></li>
</ul>

</nav>

CSS

ul li ul {
 padding-lefT: 20px;   
}

JavaScript

/*$(function() {
    var $select = $('<select selected=selected />');
    $('#sitemap li a').each(function(i, el) {
        $select.append('<option value="' + $(el).attr("href") + '">' + $(el).text() + '</option>');
    });
    ($select).appendTo("nav");
    return false;
});*/
$(function() {
    var $select = $('<select class=hey selected=selected />');
    ($select).appendTo("nav");
    $("#sitemap > li:has(a)").map(function(index,elem){
        return $("<option/>").attr("value","").html($("a", $(elem)).html());
    }).appendTo('.hey');
});