Javascript Jquery convert下拉列表使用onchange事件进行选择

我想转换一个下拉列表

<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，我将使用onchange使其工作

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

任何帮助都将不胜感激。此处id演示url:

---

Ahmar.

.live

自。。我都不记得了。 在上使用

还可以查看并使用它的下拉脚本

不要重新发明轮子

为导航创建选择菜单也是一种糟糕的做法。
您的代码在JSFIDLE中运行良好。我更新了你的代码

<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（）；
函数createSelectBox（）{
var select=$（''）；
$（'ul.selectdropdownli'）。每个（函数（）{
var anchor=$（this.find（'a'））
var选项=$（''）；
option.val（anchor.attr（'href'））.text（anchor.text（））；
选择。追加（选项）；
});
$（'#下拉列表'）.html（选择）；
}

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

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>

JSFIDLE:
问题不在于live，我甚至还没有使用onchange。选择不显示。这就是问题所在。我说一旦它被显示，我将使用onchange。
 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);
 }

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

$('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();
    });
    });