# How to convert unordered list into nicely styled \<select> dropdown using jquery? (ok)

## [How to convert unordered list into nicely styled \<select> dropdown using jquery?](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery)

[Ask Question](https://stackoverflow.com/questions/ask)Asked 10 years, 6 months agoActive [3 years, 3 months ago](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery?lastactivity)Viewed 44k times1817

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](https://stackoverflow.com/questions/tagged/javascript) [jquery](https://stackoverflow.com/questions/tagged/jquery) [css](https://stackoverflow.com/questions/tagged/css) [xhtml](https://stackoverflow.com/questions/tagged/xhtml)[share](https://stackoverflow.com/q/1897129)  [improve this question](https://stackoverflow.com/posts/1897129/edit)  follow [edited Mar 24 '14 at 14:13](https://stackoverflow.com/posts/1897129/revisions)[![](https://www.gravatar.com/avatar/b3156e9030ca51ee0b016945dd326649?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/221381/lorem-monkey)[lorem monkey](https://stackoverflow.com/users/221381/lorem-monkey)3,63233 gold badges3030 silver badges4545 bronze badgesasked Dec 13 '09 at 17:36[![](https://www.gravatar.com/avatar/5cce99e9bf6154703d8ecdf474a750bd?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/84201/jitendra-vyas)[Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas)127k211211 gold badges529529 silver badges810810 bronze badges

* @Dominic Rodger - The code i given is just for example – [Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 13 '09 at 17:49](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799660_1897129)

[add a comment](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)

### 5 Answers

[Active](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery?answertab=active#tab-top)[Oldest](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery?answertab=oldest#tab-top)[Votes](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery?answertab=votes#tab-top)15

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

[share](https://stackoverflow.com/a/1897468)  [improve this answer](https://stackoverflow.com/posts/1897468/edit)  follow [edited Mar 24 '14 at 14:19](https://stackoverflow.com/posts/1897468/revisions)[![](https://www.gravatar.com/avatar/b3156e9030ca51ee0b016945dd326649?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/221381/lorem-monkey)[lorem monkey](https://stackoverflow.com/users/221381/lorem-monkey)3,63233 gold badges3030 silver badges4545 bronze badgesanswered Dec 13 '09 at 19:32[![](https://www.gravatar.com/avatar/6cd4ece43940d28b605ed54fbadafc95?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/230520/czarchaic)[czarchaic](https://stackoverflow.com/users/230520/czarchaic)5,8302323 silver badges2121 bronze badges

* code working to make dropdown but links not opening in new window – [Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 14 '09 at 4:46](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1801873_1897468)
* link opening in same tab in firefox – [Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 14 '09 at 4:46](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1801875_1897468)
* 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](https://stackoverflow.com/users/230520/czarchaic) [Dec 14 '09 at 5:12](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1801936_1897468)
* 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](http://jsbin.com/agane) thanks for this. – [Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 14 '09 at 5:45](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1802033_1897468)
* 2Use 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. – [The Pied Pipes](https://stackoverflow.com/users/52092/the-pied-pipes) [Jul 12 '14 at 21:24](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment38336690_1897468)&#x20;

[show **4** more comments](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)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.[share](https://stackoverflow.com/a/1897170)  [improve this answer](https://stackoverflow.com/posts/1897170/edit)  follow [edited Dec 13 '09 at 18:19](https://stackoverflow.com/posts/1897170/revisions)answered Dec 13 '09 at 17:50[![](https://www.gravatar.com/avatar/bd4b98fa3891e761de0c60a042832657?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/198707/tatu-ulmanen)[Tatu Ulmanen](https://stackoverflow.com/users/198707/tatu-ulmanen)110k3131 gold badges171171 silver badges179179 bronze badges

* You are trying to execute the script inside \<style> tags, change those to \<script>. I also updated my function, there was a small mistake. – [Tatu Ulmanen](https://stackoverflow.com/users/198707/tatu-ulmanen) [Dec 13 '09 at 18:20](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799766_1897170)
* oh , my mistake , solved now now i added ur latest code it's working now [jsbin.com/igano](http://jsbin.com/igano) but on select a item from dropdown i wanted to open link in new window – [Jitendra Vyas](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 13 '09 at 18:27](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799791_1897170)
* @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](https://stackoverflow.com/users/198707/tatu-ulmanen) [Dec 13 '09 at 18:38](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799834_1897170)
* 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](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 13 '09 at 18:42](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799846_1897170)
* I found a another js solution for same [onlinetools.org/tests/enhancedropdown.html](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](https://stackoverflow.com/users/84201/jitendra-vyas) [Dec 13 '09 at 18:44](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment1799850_1897170)

[show **1** more comment](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)2

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

[share](https://stackoverflow.com/a/6760507)  [improve this answer](https://stackoverflow.com/posts/6760507/edit)  follow answered Jul 20 '11 at 10:31[![](https://www.gravatar.com/avatar/52e89324e950408077fdac1838e43781?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/853746/radim)[Radim](https://stackoverflow.com/users/853746/radim)2111 bronze badge

* Thanks exactly what I was after – [Leigh](https://stackoverflow.com/users/5316565/leigh) [Aug 18 '16 at 15:30](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#comment65394789_6760507)

[add a comment](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)0

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](https://github.com/leifcr/jquery-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);
});
```

[share](https://stackoverflow.com/a/19187883)  [improve this answer](https://stackoverflow.com/posts/19187883/edit)  follow [edited Oct 4 '13 at 22:05](https://stackoverflow.com/posts/19187883/revisions)answered Oct 4 '13 at 18:04[![](https://www.gravatar.com/avatar/6be603198d62a7b812512ebb04e7acb5?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/301050/mon)[Mon](https://stackoverflow.com/users/301050/mon)1122 bronze badges[add a comment](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)0

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](https://github.com/quanton81/quanton-ul-to-select)

And a live example here: [Code Example](http://www.ciaomondo.it/blog/convertire-ul-in-select-con-search.php)

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.[share](https://stackoverflow.com/a/43158401)  [improve this answer](https://stackoverflow.com/posts/43158401/edit)  follow [edited Apr 1 '17 at 15:20](https://stackoverflow.com/posts/43158401/revisions)answered Apr 1 '17 at 15:02[![](https://www.gravatar.com/avatar/0a30b7deab9fe8a00425f06eaff321cf?s=32\&d=identicon\&r=PG\&f=1)](https://stackoverflow.com/users/2621976/quanton)[quAnton](https://stackoverflow.com/users/2621976/quanton)60666 silver badges99 bronze badges[add a comment](https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery#)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/how-to-convert-unordered-list-into-nicely-styled-less-than-select-greater-than-dropdown-using-jquery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.