如何使用 jquery 将无序列表转换为样式精美的 <select> 下拉列表？

IT技术 javascript jquery css xhtml
2021-02-10 09:09:46

如何以这种格式转换无序列表

<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>

进入这种格式的下拉菜单

<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>

使用jQuery？

编辑：从选择/下拉列表中选择条目时，链接应自动在新窗口或选项卡中打开。我也希望能够将它的样式设置为：http : //www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

5个回答
$(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);
    });
});

编辑

与您想在页面加载时运行的任何 jQuery 代码一样，您必须将其包装在$(document).ready(function() { ... });块中，或者包装在较短的版本中$(function() { ... });。我更新了功能以显示这一点。

编辑

还有就是在我的代码也是一个错误，试图从li元素采取HREF。

我为相同的onlinetools.org/tests/enhancedropdown.html找到了另一个 js 解决方案，并在此链接中在新窗口中打开，但问题是它不是基于 jquery
2021-03-16 09:09:46
是的代码正在运行，非常感谢它。我结束了这个问题，但如果你能给出在新窗口中打开链接的方法，那就更好了
2021-03-22 09:09:46
@Jitendra，打开更改链接和样式选择超出了这个问题的范围，谷歌有很多资源可以解决这两个问题。如果代码有效，让我们关闭这个。
2021-03-26 09:09:46
哦，我的错误，现在解决了，现在我添加了你的最新代码，它现在可以使用jsbin.com/igano但是在从下拉列表中选择一个项目时，我想在新窗口中打开链接
2021-03-28 09:09:46
您正在尝试执行 <style> 标签内的脚本，将它们更改为 <script>。我也更新了我的功能，有一个小错误。
2021-04-08 09:09:46 
$('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();
});
链接在 Firefox 中的同一选项卡中打开
2021-03-17 09:09:46
使用 change()，但在选择元素上，而不是选项：select.change(function() { window.location = $(this).find("option:selected").val(); });<-----这应该使上述代码在 Chrome 中工作。
2021-03-18 09:09:46
它应该只在链接上打开一个带有 _blank 目标的新窗口。您是否将 console.log 放入 if 语句中以查看它是否试图在新窗口中打开？
2021-03-28 09:09:46
代码正在制作下拉菜单但链接未在新窗口中打开
2021-04-07 09:09:46
是的，您的代码是正确的。我没有添加 target=_blank 是我的错误。现在它工作正常，你可以在这里看到jsbin.com/agane，谢谢。
2021-04-13 09:09:46

此解决方案也适用于 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();
});
感谢我所追求的
2021-03-15 09:09:46

感谢大家发布代码。我的场景是类似的，但我的情况是响应性，对于 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);
});

我最近创建了一个解决方案，其中 ul 转换，几乎完全模仿了选择。

此外，它还可以搜索选择的选项并支持活动状态。只需添加一个名称为 active 的类，该选项将被选中。

它处理键盘导航。

看看这里的代码：GitHub Code

这里有一个活生生的例子：代码示例

无序列表必须采用以下形式：

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

要将 ul 转换为 select 只需调用：

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

其中#id 是无序列表的 id，767 是转换发生的窗口的最小宽度。如果您希望仅针对移动设备或平板电脑进行转换，这将非常有用。

其它你可能感兴趣的问题
上一篇使用 Javascript 将 Excel 日期序列号转换为日期 下一篇拒绝执行脚本，是否启用了严格的 MIME 类型检查？