用無序列表替換下拉列表。 JavaScript的方式

Question

我有

<div id="edit-country-wrapper"> 
    <select id="edit-country" class="form-select" name="country"> 
    <option selected="selected" value="all">All</option> 
    <option value="canada">Canada</option> 
    <option value="usa">USA</option> 
    </select> 
</div> 

並希望將其更改爲

<div id="edit-country-wrapper"> 
    <ul id="edit-country" class="form-select" name="country"> 
    <li><a class="selected" href="/all">All</a></li> 
    <li><a class="" href="/canada">Canada</a></li> 
    <li><a class="" href="/usa">USA</a></li> 
    </ul> 
</div> 

這就是我現在所擁有的。

$(document).ready(function() { 
    $('#edit-country-wrapper select').each(function() { 
     var $select = $('<div id="location-select" />'); 
     $(this).find('option').each(function() { 
      var $option = $('<a />'); 
      $option.attr({ 
       href: '?country=' +$(this).attr('value'), 
       id: 'location-' + $(this).attr('value'), 
       class: $(this).attr('selected'), 
       html: $(this).html() 
      }); 
      $select.append($option); 
     }); 

     $(this).replaceWith($select); 
    }); 
}); 

我想用無序列表替換下拉列表。我已經在FF & Chrome中工作，但不在IE中。請幫忙！！

Answer 1

我不認爲你可以使用attr來設置這樣的HTML（我think它只會在html鏈接上創建一個新的屬性）。

嘗試更換與...

var $option = $('<a />', { 
       href: '?country=' +$(this).attr('value'), 
       id: 'location-' + $(this).attr('value'), 
       class: $(this).attr('selected'), 
       html: $(this).html() 
      }); 

只要你使用jQuery> = 1.4

Answer 2

$option.attr({ 
    href: '?country=' +$(this).attr('value'), 
    id: 'location-' + $(this).attr('value'), 
    class: $(this).attr('selected'), 
}).html($(this).html());