jQuery Single Select (list-box)

Situation: You have a list-box and you have to choose only one item from the list (not multiple). So, in this case use .sublings() and .removeClass()

HTML

<ul id="listId">
    <li class="normal">Item 1</li>
    <li class="normal">Item 2</li>
    <li class="normal">Item 3</li>
    <li class="normal">Item 4</li>
    <li class="normal">Item 5</li>
    <li class="normal">Item 6</li>
    <li class="normal">Item 7</li>
    <li class="normal">Item 8</li>
    <li class="normal">Item 9</li>
</ul>

CSS

#listId { 
    width: 200px; 
    border: 1px solid #222;
    margin-left: 100px;
}

.normal { 
    background: white; 
}

.selected { 
    background: lightblue; 
}

JavaScript

$("#listId li").click(function() {
    $(this).addClass("selected").siblings().removeClass("selected");
alert($("#listId .selected").html());
});