title: Jquery convert dropdown to select with onchange event
body: <p>I want to convert a drop down </p>
  
  <pre><code>&lt;ul class="cat-items selectdropdown"&gt;
      &lt;li class="cat-item cat-item-25"&gt;
          &lt;a href="http://restaurantapplianceparts.com/?product_cat=a1-compressor" title="View all posts filed under A-1 Compressor"&gt;A-1 Compressor&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="cat-item cat-item-207"&gt;
          &lt;a href="http://restaurantapplianceparts.com/?product_cat=world-hand-dryer" title="View all posts filed under World Hand Dryer"&gt;World Hand Dryer&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>To select menu dynamically. Here is what I am using and it looks perfectly. But The conversion is not being made and drop down is displayed instead of select.Here is jquery code which loads on ready. </p>
  
  <pre><code>$('ul.selectdropdown').each(function() {
          var list = $(this),
              select = $(document.createElement('select')).insertBefore($(this).hide());
              $(select).attr("style","cursor:pointer;display: inline-block; width:99%;");
          $('&gt;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());
  
          });
      });
  </code></pre>
  
  <p>Once select is displayed I will use onchange to make it work. </p>
  
  <pre><code>$('select').bind('change',function () {
     //Redirect Page
  });
  </code></pre>
  
  <p>Any help would be appreciated. Here id demo url:<a href="http://restaurantapplianceparts.com" rel="nofollow">restaurantapplianceparts.com</a>
  Ahmar.</p>