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

Question

How do I convert an unordered list in this format

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

into a dropdown in this format

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

using jQuery?

Edit: When selecting an entry from the select/dropdown the link should open in a new window or tab automatically. I also want to able to style it like: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Solution 1

$('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();
});

Solution 2

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

        $(this).find('a').each(function() {
            var $option = $('<option />');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});

EDIT

As with any jQuery code you want to run on page load, you have to wrap it inside $(document).ready(function() { ... }); block, or inside it's shorter version $(function() { ... });. I updated the function to show this.

EDIT

There was a bug in my code also, tried to take href from the li element.

Solution 3

This solution is working also in IE and working with selected item (in anchor tag).

$('ul.selectdropdown').each(function(){
var list=$(this),
    select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  window.location.href=$(this).val();
});
$('>li a', this).each(function(){
  var option=$(document.createElement('option'))
   .appendTo(select)
   .val(this.href)
   .html($(this).html());
  if($(this).attr('class') === 'selected'){
    option.attr('selected','selected');
  }
});
list.remove();
});

Comments

[Tatu Ulmanen]

You are trying to execute the script inside <style> tags, change those to <script>. I also updated my function, there was a small mistake.

[Jitendra Vyas]

oh , my mistake , solved now now i added ur latest code it's working now jsbin.com/igano but on select a item from dropdown i wanted to open link in new window

[Tatu Ulmanen]

@Jitendra, opening link on change and styling the select is out of the scope for this question, Google has a lot of resources for both of those. If the code is working, lets just close this one.

[Jitendra Vyas]

Yes code is working and great thanks for it. I closed the question but if u can give the way to open links in new window then it would be better

[Jitendra Vyas]

I found a another js solution for same onlinetools.org/tests/enhancedropdown.html and in this link opens in new window but the problem is it's not jquery based

[Tatu Ulmanen]

First you need to bind the created select element to a change event, and in that, get the value and redirect the browser. If you have problems with that, post a new question but try to do it yourself first.

[Jitendra Vyas]

code working to make dropdown but links not opening in new window

[Jitendra Vyas]

link opening in same tab in firefox

[czarchaic]

It should only open a new window with a _blank target on the link. Have you dropped a console.log into the if statement to see if it's trying to open in a new window?

[Jitendra Vyas]

yes your code was right. it was my mistake i had not added target=_blank . now it working fine u can see here jsbin.com/agane thanks for this.

[Jitendra Vyas]

but now the problem is unordered still showing in source code

[Jitendra Vyas]

Cool it's perfect now. now i just want to give cool look to this <select> like this pluging does dfc-e.com/metiers/multimedia/opensource/jqtransform

[Alaa]

hi guys, i have tried your example at jsbin.com/etoyu it is working fine on FF but doesn't on chrome and safari... any idea??

[this_guy]

use change instead of click - stackoverflow.com/questions/4340690/…

[The Pied Pipes]

Use change(), but on the select element, not the option: select.change(function() { window.location = $(this).find("option:selected").val(); }); <-----this should get the above code to work in Chrome.

[Leigh]

Thanks exactly what I was after