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＆amp; Chrome但不在IE中。请帮助!!

Answer 1

我认为您不能使用attr来设置HTML（I think它只会在名为html的链接上创建一个新属性。

尝试用...替换它。

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

只要你使用jQuery＆gt; = 1.4

Answer 2

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

用无序列表替换下拉列表。 javascript的方式

2 个答案: