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?

You have a typo, missing an `e` in `#selctable` ? – adeneo Aug 11 '12 at 07:53 — adeneo, Aug 11 '12 at 07:53

score 5 · Answer 1 · answered Aug 11 '12 at 07:56

5

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

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

FIDDLE

answered Aug 11 '12 at 07:56

adeneo

312,895
29
395
388

+1 for help on adding a selection to the selectable programmatically. There's no guidance on this in the jQuery Ui Selectable documentation. I would believe this would be a pretty common requirement. – JustinMichaels Feb 18 '13 at 21:51

score 3 · Accepted Answer · answered Aug 11 '12 at 07:53

3

You miss-spelled selectable.

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

check out this jsFiddle

answered Aug 11 '12 at 07:53

Amin Eshaq

4,034
1
17
21

Need to get some sleep I guess. – Subliminal Hash Aug 11 '12 at 08:12

score 1 · Answer 3 · answered Aug 11 '12 at 08:03

1

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

answered Aug 11 '12 at 08:03

Compustretch

127
2
11

score 0 · Answer 4 · edited May 23 '17 at 11:59

0

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

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

edited May 23 '17 at 11:59

Community

1
1

answered Aug 11 '12 at 07:54

Alberto León

2,879
2
25
24

selected is for options of the select element.. he has an OL – Amin Eshaq Aug 11 '12 at 07:57
Was my fault, I up voted your response, because the error is miss-spelled as you said – Alberto León Aug 11 '12 at 08:06

score 0 · Answer 5 · answered Aug 11 '12 at 08:02

0

you can use like this

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

please check the example: FIDDLE

answered Aug 11 '12 at 08:02

Pradeeshnarayan

1,235
10
21

jquery ui selectable: make an option selected on load

5 Answers5