Replace dropdown list with unordered list. The javascript way

Question

I have

<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>

And want to change it to

<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>

This is what I have right now.

$(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);
    });
});

I'm trying to replace a dropdown list with an unordered list. I have it working in FF & Chrome but not in IE. Please Help!!

What doesn't work in IE? Any error received? Is the HTML generated fine? — alex
– alex, Commented Dec 18, 2010 at 0:45
IE doesn't convert the dropdown into a list but FF & Chrome does. — canintex
– canintex, Commented Dec 20, 2010 at 19:44

alex · Accepted Answer · 2010-12-18 00:46:38Z

1

I don't think you can use attr to set HTML like that (I think it would just make a new attribute on the link called html).

Try replacing that with...

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

So long as you are using jQuery >= 1.4

answered Dec 18, 2010 at 0:46

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex Over a year ago

@Erik In that case, you can't set html like that. You want to chain a separate method html() and its first argument is the HTML.

Andy · Accepted Answer · 2010-12-18 01:14:40Z

1

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

answered Dec 18, 2010 at 1:14

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Collectives™ on Stack Overflow

Replace dropdown list with unordered list. The javascript way

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related