Using LI instead of Select

by Michel Plungjan

HTML

<ul id="search-option">
    <li data-option="buy" class="sel">inputBUY</li>
    <li data-option="rent">RENT/LEASE</li>
    <li data-option="pg">PG</li>
</ul>
<a href="#" id="searchLink">Search</a>
<div id="result"></div>

CSS

.sel { background-color:yellow }

JavaScript

$(function() { // when page loads
    $("#searchLink").on("click",function(e) { // when link clicked
        e.preventDefault(); // stop the click from any further action
        var option = $("#search-option li.sel").data("option"); // get the selected option
        $.post("search.php",{"option":option},function(data) { // post the option
            $("#result").html(data); // show the result
        });
    });
    $("#search-option li").on("click",function() { // when li is clicked
        $(this)
        .addClass("sel")
        .siblings().removeClass("sel"); // swap class
    });
});