Question

我想转换下拉列表

<ul class="cat-items selectdropdown">
    <li class="cat-item cat-item-25">
        <a href="http://restaurantapplianceparts.com/?product_cat=a1-compressor" title="View all posts filed under A-1 Compressor">A-1 Compressor</a>
    </li>
    <li class="cat-item cat-item-207">
        <a href="http://restaurantapplianceparts.com/?product_cat=world-hand-dryer" title="View all posts filed under World Hand Dryer">World Hand Dryer</a>
    </li>
</ul>

动态选择菜单。这是我正在使用的，它看起来很完美。但是没有进行转换，而是显示下拉而不是select.Here是jquery代码，它已加载就绪。

$('ul.selectdropdown').each(function() {
        var list = $(this),
            select = $(document.createElement('select')).insertBefore($(this).hide());
            $(select).attr("style","cursor:pointer;display: inline-block; width:99%;");
        $('>li', this).each(function() {
            var ahref = $(this).children('a'),
                target = ahref.attr('target'),
                option = $(document.createElement('option')).appendTo(select).val(ahref.attr('href')).html(ahref.html());

        });
    });

一旦显示选择，我将使用onchange使其工作。

$('select').bind('change',function () {
   //Redirect Page
});

任何帮助将不胜感激。这里是id demo url：restaurantapplianceparts.com 艾哈迈尔。

Answer 1

您的代码在jsfiddle中运行正常。我更新了你的代码。

<div id="dropdown">
<ul class="cat-items selectdropdown">
    <li class="cat-item cat-item-25">
        <a href="http://restaurantapplianceparts.com/?product_cat=a1-compressor" title="View all posts filed under A-1 Compressor">A-1 Compressor</a>
    </li>
    <li class="cat-item cat-item-207">
        <a href="http://restaurantapplianceparts.com/?product_cat=world-hand-dryer" title="View all posts filed under World Hand Dryer">World Hand Dryer</a>
    </li>
</ul>

 createSelectBox();
 function createSelectBox() {
    var select = $('<select>');
    $('ul.selectdropdown li').each(function() {
       var anchor = $(this).find('a')
       var option = $('<option>');
       option.val(anchor.attr('href')).text(anchor.text());
       select.append(option);
   });
   $('#dropdown').html(select);
 }

Demo here

Answer 2

我使用您的代码进行了一些更改以使其正常工作。

<强> HTML

<ul class="cat-items selectdropdown">
    <li class="cat-item cat-item-25">
        <a href="http://restaurantapplianceparts.com/?product_cat=a1-compressor" title="View all posts filed under A-1 Compressor">A-1 Compressor</a>
    </li>
    <li class="cat-item cat-item-207">
        <a href="http://restaurantapplianceparts.com/?product_cat=world-hand-dryer" title="View all posts filed under World Hand Dryer">World Hand Dryer</a>
    </li>
</ul>

<强>的Javascript

$('ul.selectdropdown').each(function() {
        var list = $(this),
            select = $(document.createElement('select')).insertBefore($(this).hide());
            $(select).attr("style","cursor:pointer;display: inline-block; width:99%;");
        $('>li', this).each(function() {
            var ahref = $(this).children('a'),
                target = ahref.attr('target'),
                option = $(document.createElement('option')).appendTo(select).val(ahref.attr('href')).html(ahref.html());

        });
    $(select).change(function() {
        window.location.href = $(this).find('option:selected').val();
    });
    });

jsFiddle：http://jsfiddle.net/Cf7Pt/1/

Answer 3

.live已被弃用，因为我甚至都不记得了。使用.on。 http://api.jquery.com/on/

还要查看http://getbootstrap.com/并使用它的下拉脚本。

不要重新发明轮子。

创建导航选择菜单也是不好的做法。

Jquery转换下拉列表以使用onchange事件进行选择

3 个答案: