How to Convert Unordered List into Nicely Styled ≪Select≫ Dropdown Using Jquery

How to convert unordered list into nicely styled <select> dropdown using jquery?

$('ul.selectdropdown').each(function() {
    var select = $(document.createElement('select')).insertBefore($(this).hide());
    $('>li a', this).each(function() {
        var a = $(this).click(function() {
            if ($(this).attr('target')==='_blank') {
                window.open(this.href);
            }
            else {
                window.location.href = this.href;
            }
        }),
        option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function() {
            a.click();
        });
    });
});

In reply to your last comment, I modified it a little bit but haven't tested it. Let me know.

$('ul.selectdropdown').each(function() {
    var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide());

    $('>li a', this).each(function() {
        var target = $(this).attr('target'),
        option = $(document.createElement('option'))
            .appendTo(select)
            .val(this.href)
            .html($(this).html())
            .click(function(){
                if(target==='_blank') {
                    window.open($(this).val());
                }
                else {
                    window.location.href = $(this).val();
                }
            });
    });
    list.remove();
});

Convert unordered list into following styled <select> dropdown list in jquery

First, iterate over the list items and build a select drop-down using jQuery - checking for the class called active on each list item. If the list item has the active class, set the selected attribute of the option element to selected. Next, append the drop-down wherever you'd like.

Working JSFiddle Demo

Convert select dropdown into list for printing

You're creating a new ul element at every step in the loop. Use this instead:

var $select = $('#oberservationType'),
    $list = $('<ul />');

$select.find('option').each(function(){
    $list.append('<li>' + $(this).text() + '</li>');
});

$select.after( $list ).remove();

Here's the fiddle: http://jsfiddle.net/YDbgv/

To do this for every select on the page, use this:

$('select').each(function () {
    var $this = $(this),
        $list = $('<ul />');

    $this.find('option').each(function(){
        $list.append('<li>' + $(this).text() + '</li>');
    });

    $this.after( $list ).remove();
});

Here's the fiddle: http://jsfiddle.net/YDbgv/2/

Convert a hierarchical unordered list to a select list using javascript

Here's some jQuery code doing what you want. As I don't know where you want the <select> appended, I'm just appending it directly to <body>. There's also an issue of the $('li') selector being too greedy (it will select all <li> elements in the document), but it's easy to fix given the knowledge about the parent elements of the <ul> element you've posted.

(function($) { $(function() {
    var $select = $('<select>')
        .appendTo('body');

    $('li').each(function() {
        var $li    = $(this),
            $a     = $li.find('> a'),
            $p     = $li.parents('li'),
            prefix = new Array($p.length + 1).join('-');

        var $option = $('<option>')
            .text(prefix + ' ' + $a.text())
            .val($a.attr('href'))                       
            .appendTo($select);

        if ($li.hasClass('current-page')) {
            $option.attr('selected', 'selected');
        }
    });
});})(jQuery);

I would also consider using <optgroup> instead of the - prefix as a way of indicating the hierarchy level.

How to Convert Unordered List into Nicely Styled ≪Select≫ Dropdown Using Jquery