How to convert unordered list into nicely styled <select> dropdown using jquery? (ok)
https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery
Ask QuestionAsked 10 years, 6 months agoActive 3 years, 3 months agoViewed 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 jquery css xhtmlshare improve this question follow edited Mar 24 '14 at 14:13
@Dominic Rodger - The code i given is just for example – Jitendra Vyas Dec 13 '09 at 17:49
5 Answers
$('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 improve this answer follow edited Mar 24 '14 at 14:19
code working to make dropdown but links not opening in new window – Jitendra Vyas Dec 14 '09 at 4:46
link opening in same tab in firefox – Jitendra Vyas Dec 14 '09 at 4: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 5:12
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 Dec 14 '09 at 5:45
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 Jul 12 '14 at 21:24
$(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 improve this answer follow edited Dec 13 '09 at 18:19answered Dec 13 '09 at 17:50
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 Dec 13 '09 at 18:20
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 – 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 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
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 improve this answer follow answered Jul 20 '11 at 10:31
Thanks exactly what I was after – Leigh Aug 18 '16 at 15:30
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);
});share improve this answer follow edited Oct 4 '13 at 22:05answered Oct 4 '13 at 18:04
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.share improve this answer follow edited Apr 1 '17 at 15:20answered Apr 1 '17 at 15:02
Last updated