jQuery UI selectable won't work with anything besides '#selectable'

Question

I am trying to use 2 instances of the jquery selector UI on my site and it won't seem to work with anything besides '#selectable' as the ordered list id.

Here is my code..

    <script type="text/javascript">
    $(document).ready(function() {
        $("#selectable").selectable();
    });
</script>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

But if i try to use something other than selectable, it doesn't work.. anyone have similar issues?

Answer 1

Works fine for me with the following code:

<script type="text/javascript">
    $(function() {
        $('#cheeses').selectable();
    });
</script>

<ul id="cheeses">
    <li>Cheddar</li>
    <li>Swiss</li>
    <li>Parmesan</li>
</ul>

All I can suggest is maybe you have CSS tied to the #selectable id so it actually is working but you just can't see anything changing visually.