Solution for Gani4u

On the assumption that you simply wish to display the index, I have utilised the 'value' attribute of the <li> element for simplicity. I have also added a pointer cursor and highlighting colour to improve user-friendliness. ----------------------------------- In answer to:- https://forum.jquery.com/topic/unable-to-display-selected-value-in-jquery-selectable

by alano

HTML

<ul id="selectable">
    <li value="1">Item 1</li>
    <li value="2">Item 2</li>
    <li value="3">Item 3</li>
    <li value="4">Item 4</li>
    <li value="5">Item 5</li>
</ul>
<p id="feedback">
    <span>You've selected:</span> <span id="select-result">none</span>.
</p>

CSS

#feedback { font-size: 1.4em; padding-top: 1em;}
#selectable .selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
#selectable li:hover { background: #FECA40; cursor: pointer;}

JavaScript

$("#selectable li").click(function(e) {
    $(this).addClass("selected").siblings().removeClass("selected");
    $("#select-result").text(" #" + e.target.value);
});