Question

I am trying to make this little code work. I have a normal drop-down menu and I want to turn it into a drop-down list (select).

The normal menu has a "tm_active" id attached to show which page you are on. I want to use jquery and find this id, then when page loads to select the right item according to what page you are on (not the first item in the list).

What am I doing wrong guys? Thank you.

$('table.topMenu tr').each(function(){
var list=$(this),
    select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  window.location.href=$(this).val();
});
$('>td a', this).slice(2).each(function(){
  var option=$(document.createElement('option'))
   .appendTo(select)
   .val(this.href)
   .html($(this).html());
  if($(this).attr('id') === 'tm_active'){
    option.attr('selected','selected');
  }
});
list.remove();
});

HTML

<table>
<tr>
<td class="top">
<a href="#">Section 1</a>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</td>
<td class="top" id="tm_active">
<a href="#">Section 2</a>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</td>
<td class="top">
<a href="#">Section 3</a>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</td>
</tr>
</table>
Was it helpful?

Solution

You are checking the id of the anchor tag you should check the parent td:

$(this).parent().attr('id') === 'tm_active'

FIDDLE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top