How to highlight an item in selectable without clicking on it (By code)?

Question

How to select(highlight) an item in selectable without clicking on it (By code)?

Such that I give it the index of which box to select/higlight

I create them dynamically like that

<div class="demo">  <ol id="selectable">  </ol></div>

and

var div = document.getElementById("selectable");
for(i=0; i<list.size; i++)
{    
    // It should look like that
    //<li class="ui-widget-content">Item 1</li>    
    var properties = list[i].getProperties();    
    var aTag = document.createElement("li"); 
    //file name or something as ID    
    aTag.setAttribute('class',"ui-widget-content");    
    aTag.setAttribute('id',i);
    aTag.innerHTML = properties.fileName;
    //file name
    div.appendChild(aTag);
}

Answer 1

$('youritem').trigger('click'); will do the job! Easy solution.

Answer 2

You can select an index by using eq(). 0 being the first item.

$('item').eq(0).css('background-color','yellow'); //give the first item a yellow background.

Check working example at http://jsfiddle.net/FKvhG/

Answer 3

You can use focus(): $('#element').focus();

Answer 4

You can use

$("#id").val("example value")

to select an item given its value. You can find the value by index using

$("#id").find("option").eq(index).val()

so putting them together we have

$("#id").val($("#id").find("option").eq(index).val());

which does what you want.

Answer 5

If you're select list has the id 'dropdown' and you want to select the first element, then this will work.

The eq() function will select whatever element you want, its zero based.

$('#dropdown').eq(0).attr("selected", true);