jquery ui selectable: make an option selected on load

Question

I have the following HTML:

<ol id="selectable">
    <li class="ui-state-default">Option 1</li>
    <li class="ui-state-default">Option 1</li>
    <li class="ui-state-default">Option 3</li>
</ol>

I need, for example the first option, to be selected by default on page load. I use the following code without any luck:

$(document).ready(function () {
    $('#selctable li:first').addClass('ui-selected');
});

Any ideas on what I'm doing wrong?

Answer 1

You miss-spelled selectable.

$('#selectable li:first').addClass('ui-selected');​

check out this jsFiddle

Answer 2

You need to call selectable() before adding the class to the first li

$(function() {
    $( "#selectable" ).selectable().children().first().addClass('ui-selected');
});​

FIDDLE

Answer 3

attributeName - Use .attr() and set the value to true: http://api.jquery.com/attr/

Answer 4

$(document).ready(function () {
    $('#selectable li:first').attr("selected",true);
});

See this question: jQuery Cannot set "selected"="selected" via attr() on <option> elements?

Answer 5

you can use like this

$('#selectable :first-child').addClass('ui-selected');

please check the example: FIDDLE