How to display the text of the selected item in a list when using JQuery UI Selectable

How to display the text of the selected item in a list when using JQuery UI Selectable


Hi
I am using JQuery UI Selectable to select items in a list(using <ol> or
<ul>). Depending on the item selected I want to populate another list. So I
was trying to alert the text of the selected item when the item is selected,
but I didn't find any method for this in JQuery UI Selectable documentation
at http://jqueryui.com/demos/selectable/. When I use JQuery UI Sortable I am
able to display the text of the selected item using 'ui.item.text()', but
this does not work with JQuery UI Selectable.
Here is a my code:
<head>
<script type="text/javascript" src="JQuery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JQuery/js/jquery.ui.all.js"></script>
<script type="text/javascript" src="JQuery/js/ui.sortable.js"></script>
<script type="text/javascript" src="JQuery/js/ui.core.js"></script>
<script type="text/javascript"
src="JQuery/js/jquery-ui-1.7.1.custom.js"></script>
<script type="text/javascript" src="JQuery/js/ui.draggable.js"></script>
<script type="text/javascript" src="JQuery/js/ui.droppable.js"></script>
<script type="text/javascript" src="JQuery/js/ui.selectable.js"></script>
        
        <style type="text/css">
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 40%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; }
    </style>
<script type="text/javascript">
    $(function() {
        
        $("#selectable").selectable({
selected: function(event, ui){
if (ui.item.text()=="Item1"){
alert("Item1");
}
}
});
    });
    </script>
</head>
<body>
<ol id="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
<li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol>
<ol id="selected">
</ol>
</body>
Please can any one help. Thanks in advance.
--
View this message in context: http://www.nabble.com/How-to-display-the-text-of-the-selected-item-in-a-list-when-using-JQuery-UI-Selectable-tp24362942s27240p24362942.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.