如何使用jquery将无序列表转换为格式精美的下拉列表？
如何以此格式转换无序列表
进入这种格式的下拉列表
one two three four five six seven
使用jQuery？
编辑：从选择/下拉列表中选择条目时，链接应自动在新窗口或选项卡中打开。 我也希望能够设置它的样式： http ： //www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
$('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(); }); }); });
在回复你的上一条评论时 ，我对它进行了一些修改，但尚未对其进行测试。 让我知道。
$('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(); });
$(function() { $('ul.selectdropdown').each(function() { var $select = $(''); $(this).find('a').each(function() { var $option = $(''); $option.attr('value', $(this).attr('href')).html($(this).html()); $select.append($option); }); $(this).replaceWith($select); }); });
编辑
与您想要在页面加载时运行的任何jQuery代码一样，您必须将其包装在$(document).ready(function() { https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery/... }); 阻止，或在其内部的较短版本$(function() { https://stackoverflow.com/questions/1897129/how-to-convert-unordered-list-into-nicely-styled-select-dropdown-using-jquery/... }); 。 我更新了函数来显示这个。
编辑
我的代码中也有一个错误，试图从li元素中获取href。
此解决方案也在IE中工作并使用所选项目（在锚标记中）。
$('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(); });
谢谢大家发布的代码。 我的情况类似，但我的情况是响应性，对于x-size，它将切换到下拉列表，如果不是x-size，则使用csswatch检查具有一定宽度设置的元素的“显示”属性对它（例如：740px）。 我想我会为感兴趣的人分享这个解决方案。 这就是我与Tatu’代码的结合。 而不是替换html，我创建然后隐藏新的HTML然后只在必要时添加它们：
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 = $(''); $list.find('a').each(function() { var $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); });
我最近创建了一个解决方案，其中ul转换，几乎完全模仿选择。
它有一个搜索select的选项并支持活动状态。 只需添加一个名为active的类，即可选择该选项。
它处理键盘导航。
看看这里的代码： GitHub代码
这里有一个实例： 代码示例
无序列表必须采用以下forms：
- https://stackoverflow.com/questions/1897129/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/...
- https://stackoverflow.com/questions/1897129/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/...
要转换ul以选择只调用：
$(window).on("load resize", function() { ulToSelect($("ul#id"), 767); });
其中#id是无序列表的id，767是转换窗口的最小宽度。 如果您希望仅针对移动设备或平板电脑进行转换，这非常有用。