click to change text

click to change text

HTML

<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>

CSS

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background:url(arrow.png) no-repeat scroll right top;
    border:1px solid rgb(170,170,170);
    width:180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    display: none;
    padding: 1px;
}

JavaScript

$(".select").click(function () {
        $(this).find('ul li').toggle();
    });

    $(".select ul li").click(function(e) {
           $(this).closest('div.select').text($(this).html());
    });