Question

I am working with the jquery UI spinoff plugin selectmenu from this github and the documentation lists something that I’m having a difficult time …. $.wrapping my head around.

wrapperElement: “”, Wraps all added elements into a HTML tag. $.wrap parameters accepted.

I don’t entirely understand what is going on here. I discovered it because I was trying to find a way to place an id="" attribute on the ul that the plugin generates so that I can use more specific skinning on a per-needed basis. I tried passing in a jQuery selector and it required the element to already exist, which is counter to what I want to do. So I would write..

$(selector).selectmenu({
   wrapperElement: $('#uniqueSelect')
});

And my code turns out as ..

<select ... >
<div id="uniqueSelect">
   <a class="ui-selectmenu ... ">
</div>

(other parts of the html document)

<div id="uniqueSelect">
   <ul class="ui-selectmenu-menu ...">
      <li>...</li>
   </ul>
</div>

But what I want to output is ..

<select ... >
<a class="ui-selectmenu ... ">

(other parts of the html document)

<div id="uniqueSelect">
   <ul class="ui-selectmenu-menu ...">
      <li>...</li>
   </ul>
</div>

Can anyone offer some insight on what this mysterious wrapperElement is and how I can make it do this?

Answer 1

Based on @Matt’s comment, I think you just need to set your selector properly:

$('ul.ui-selectmenu-menu').selectmenu({
  wrapperElement: $('#uniqueSelect')
});

The link to the jQuery API documentation on wrap that @Matt mentions should help you out.

I’m not sure what your current selector is, so I’m making an assumption here.

Hope this helps.