Checkbox or Dropdown filter result

[SlashBunny]

I'm creating a website with a list of company and their profile. So far I have been able to make a navigation list of company and their profile as AJAX page.

<ul id="nav" style="float:left, margin: 10 10 0 10;">
    <li><a href="company_1">Company 1</a></li>
    <li><a href="company_2">Company 2</a></li>
    <li><a href="company_3">Company 3</a></li>
</ul>
<div id="content">
</div>

Here 's the AJAX:

$(document).ready(function (){
//initial
$('#content').load('content/index.php');

//handle menu clikcs
$('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    $('#content').load('content/' + page + '.php');
    return false;
});
});

And here 's one of company profile example:

<?php
$query = "select * from company_info where 1=1 and company_id = 1";

$run = mysql_query($query);

while ($row = mysql_fetch_array($run)){

    $company_id = $row[0];
    $company_name = $row[1];
    $company_website = $row[2];
    $company_email = $row[3];
    $company_facebook = $row[4];

echo "<h1>" . $company_name . "</h1>";
echo "<ul>";
echo "<li><h3>Brief Introduction</h3></li>";
echo "<hr />";
echo "<li><h3>Contact Information</h3></li>";
echo "<ul>";
echo "<li>Website: <a href='" . $company_website . "'>" . $company_website . "</a></li>";
echo "<li>Facebook: <a href='" . $company_facebook . "'>" . $company_facebook . "</a></li>";
//echo "<li>Email: <a href='mailto:[e-mail]'>" . $company_email . "</a></li>";
echo "<li>Email: <a href='mailto:" . $company_email . "'>" . $company_email . "</a></li>";
echo "</ul>";
echo "</li>";
echo "</ul>";
}
?>

http://i.imgur.com/zN8i0QX.jpg

What I'm trying to achieve is to make either a dropdown list or checkbox or whichever method to filter the company. Let 's take an example, Company 1 and Company 2 are big companies, Company 3 is small companies. So the filter will have 2 options as Big and Small, and when the filter is submit, only the link of the suitable company will be left.

Any help is appreciated, and last, thanks for helping!

[DJBirdi]

This is more a JS question, rather than a PHP one.

Probably best to do this with checkboxes

<div id="filters">
    <input type="checkbox" value="small">Small Companies
    <input type="checkbox" value="big">Big Companies    
</div>

<!-- add a class to the li element -->

<ul id="nav" style="float:left, margin: 10 10 0 10;">
    <li class="small"><a href="company_1">Company 1</a></li>
    <li class="big"><a href="company_2">Company 2</a></li>
    <li class="big"><a href="company_3">Company 3</a></li>
</ul>

The JS:

$("#filters input").change(function() {
    $("#filters input:checked").each(function() {
        $("ul#nav li." + $(this).val() + "").show();
    });

    $("#filters input:not(:checked)").each(function() {
        $("ul#nav li." + $(this).val() + "").hide();
    });
});