用无序列表替换下拉列表。 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());