Javascript 如何使用 jquery 将无序列表转换为样式精美的 <select> 下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1897129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert unordered list into nicely styled <select> dropdown using jquery?
提问by Jitendra Vyas
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?
使用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/
编辑：从选择/下拉列表中选择条目时，链接应自动在新窗口或选项卡中打开。我还希望能够将它的样式设置为：http: //www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
采纳答案by czarchaic
$('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();
});
回答by Tatu Ulmanen
$(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.
与您想在页面加载时运行的任何 jQuery 代码一样，您必须将其包装在$(document).ready(function() { ... });块中，或者包装在较短的版本中$(function() { ... });。我更新了功能以显示这一点。
EDIT
编辑
There wasa bug in my code also, tried to take href from the li element.
还有就是在我的代码也是一个错误，试图从li元素采取HREF。
回答by Radim
This solution is working also in IE and working with selected item (in anchor tag).
此解决方案也适用于 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();
});
回答by Mon
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 csswatchto 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:
感谢大家发布代码。我的场景是类似的，但我的情况是响应性，对于 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 = $('<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);
});
回答by quAnton
I have recently created a solution where the ul transformed, mimics nearly completely the select.
我最近创建了一个解决方案，其中 ul 转换，几乎完全模仿了选择。
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.
此外，它还可以搜索选择的选项并支持活动状态。只需添加一个名称为 active 的类，该选项将被选中。
It handles the keyboard navigation.
它处理键盘导航。
Take a look at the code here: GitHub Code
看看这里的代码：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:
要将 ul 转换为 select 只需调用：
$(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.
其中 #id 是无序列表的 id，767 是转换发生的窗口的最小宽度。如果您希望仅针对移动设备或平板电脑进行转换，这将非常有用。
