jQuery的下拉轉換與onchange事件

我想轉換一個下拉jQuery的下拉轉換與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.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演示網址：restaurantapplianceparts.com Ahmar。

來源

2014-02-12 Ahmar Ali

我用你的代碼有一些變化來得到這個工作。

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/

來源

2014-02-12 15:40:16 malkassem

.live已棄用，因爲..我什至不記得。使用.on。 http://api.jquery.com/on/

也看看http://getbootstrap.com/並使用它的下拉腳本。

不要重新發明輪子。

創建用於導航的選擇菜單也是不好的做法。

來源

2014-02-12 14:58:23

問題不在現場，我不使用，甚至還沒有電平變化。選擇沒有被顯示。那就是問題所在。我說一旦顯示，那麼我會使用onchange。 –

你的代碼在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

來源

2014-02-12 15:17:53 Jagadeesh

jQuery的下拉轉換與onchange事件

回答

相關問題