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>
<div id="content">

Here 's the AJAX:

$(document).ready(function (){

//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:

$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:5b.dznnkab@gmail.com'>" . $company_email . "</a></li>";
echo "<li>Email: <a href='mailto:" . $company_email . "'>" . $company_email . "</a></li>";
echo "</ul>";
echo "</li>";
echo "</ul>";


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!

Edited by happygeek: moved

3 Years
Discussion Span
Last Post by 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    

<!-- 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>

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();

Edited by DJBirdi

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.