How to convert unordered list into nicely styled dropdown using jquery? Asked Dec 13 '09 at 17:36 Active Oct 17 '22 at 08:55 Viewed 5.1k times 20 0 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/ javascript jquery css xhtml edited Mar 24 '14 at 14:13 lorem monkey 3,942 3 35 49 asked Dec 13 '09 at 17:36 Jitendra Vyas 148,487 229 573 852 @Dominic Rodger - The code i given is just for example – Jitendra Vyas Dec 13 '09 at 17:49 6 Answers6 21 $(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. edited Dec 13 '09 at 18:19 Tatu Ulmanen answered Dec 13 '09 at 17:50 Tatu Ulmanen 123,288 34 187 185 You are trying to execute the script inside – Tatu Ulmanen Dec 13 '09 at 18:20 oh , my mistake , solved now now i added ur latest code it's working now http://jsbin.com/igano but on select a item from dropdown i wanted to open link in new window – Jitendra Vyas Dec 13 '09 at 18:27 @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. – Tatu Ulmanen Dec 13 '09 at 18:38 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 Dec 13 '09 at 18:42 I found a another js solution for same http://www.onlinetools.org/tests/enhancedropdown.html and in this link opens in new window but the problem is it's not jquery based – Jitendra Vyas Dec 13 '09 at 18:44 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. – Tatu Ulmanen Dec 13 '09 at 18:46 16 $('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(); }); edited Mar 24 '14 at 14:19 lorem monkey 3,942 3 35 49 answered Dec 13 '09 at 19:32 czarchaic 6,268 29 23 code working to make dropdown but links not opening in new window – Jitendra Vyas Dec 14 '09 at 04:46 link opening in same tab in firefox – Jitendra Vyas Dec 14 '09 at 04:46 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? – czarchaic Dec 14 '09 at 05:12 yes your code was right. it was my mistake i had not added target=_blank . now it working fine u can see here http://jsbin.com/agane thanks for this. – Jitendra Vyas Dec 14 '09 at 05:45 but now the problem is unordered still showing in source code – Jitendra Vyas Dec 14 '09 at 05:52 Cool it's perfect now. now i just want to give cool look to this like this pluging does http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ – Jitendra Vyas Dec 14 '09 at 09:08

Answer 1

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

Answer 2

Thank you all for posting the codes. My scenario is similar but my situation is for Responsiveness that for x-size it would switch to a dropdown list, then if not x-size, using csswatch to check for the "display" properties of an element that has certain amount of width set to it (eg: 740px). Thought I share this solution for anyone who is interested. This is what I have combined with Tatu' codes. Instead of replacing the html, I created then hide the new html then only add them when necessary:

var $list = $('ul.list');
(listFunc = function(display){

    //Less than x-size turns it into a dropdown list
    if(display == 'block'){
        $list.hide();
        if($('.sels').length){
            $('.sels').show();
        } else {
            var $select = $('<select class="sels" />');

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

            $select.insertAfter($list);

            $('.sels').on('change', function(){
                window.location = this.value;
            });
        }
    } else {
        $('.sels').hide();
        $list.show();
    }
})(element.css('display'));
element.csswatch({
    props: 'display'
}).on('css-change', function (event, change) {
    return listFunc(change.display);
});

Answer 3

I have recently created a solution where the ul transformed, mimics nearly completely the select.

It has in adition a search for the options of the select and supports the active state. Just add a class with name active and that option will be selected.

It handles the keyboard navigation.

Take a look at the code here: GitHub Code

And a live example here: Code Example

The unordered list must be in the form:

<ul id="...">
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  <li><a class="active" href="...">...</a></li>
  ...
</ul>

To convert the ul to select just call:

$(window).on("load resize", function() {
  ulToSelect($("ul#id"), 767);
});

Where #id is an id for the unordered list and 767 is the minimum width of the window for the convertion to take place. This is very useful if you want the convertion to take place only for mobile or tablet.

Answer 4

I found this gorgeous CodePen from @nuckecy for anyone interested:

https://codepen.io/nuckecy/pen/ErPqQm

$(".select").click(function() {
  var is_open = $(this).hasClass("open");
  if (is_open) {
    $(this).removeClass("open");
  } else {
    $(this).addClass("open");
  }
});

$(".select li").click(function() {

  var selected_value = $(this).html();
  var first_li = $(".select li:first-child").html();

  $(".select li:first-child").html(selected_value);
  $(this).html(first_li);

});

$(document).mouseup(function(event) {

  var target = event.target;
  var select = $(".select");

  if (!select.is(target) && select.has(target).length === 0) {
    select.removeClass("open");
  }

});

His default CSS rules:

.select li {
  display: none;
  cursor: pointer;
  padding: 5px 10px;
  border-top: 1px solid black;
  min-width: 150px;
}

.select li:first-child {
  display: block;
  border-top: 0px;
}

.select {
  border: 1px solid black;
  display: inline-block;
  padding: 0;
  border-radius: 4px;
  position: relative;
}

.select li:hover {
  background-color: #ddd;
}

.select li:first-child:hover {
  background-color: transparent;
}

.select.open li {
  display: block;
}

.select span:before {
  position: absolute;
  top: 5px;
  right: 15px;
  content: "\2193";
}

.select.open span:before {
  content: "\2191";
}