javascript - Jquery 将下拉列表转换为使用 onchange 事件进行选择

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>

动态选择菜单。这是我正在使用的，它看起来很完美。但是没有进行转换，并且显示下拉列表而不是选择。这是在准备就绪时加载的 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());

        });
    });

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

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

如有任何帮助，我们将不胜感激。这里 id 演示网址:restaurantapplianceparts.com 艾哈迈尔。

Answer 1

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

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/