Member Avatar for keven.pirritano

I'm creating a web page that will have software information on: basic description, operating system, free/commercial, etc. All the content will be placed (or generated) on one page. Dropdown filters at the top of the content will allow someone to select a "filter" (i.e. Windows) and it will auto remove all content (software) that doesn't work on Mac or Linux.

I have spent hours trying to find a pre-made script (Java & PHP), but nothing is coming up in Google or my search terms suck. I even tried finding tutorials on how to create what I want to no avail.

Can anyone point me in the right direction?

Edited by pritaeas because: Moved.
  • 2 Contributors
  • 3 Replies
  • 418 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by keven.pirritano

Dani AI

Generated

A concise plan and a small, robust client-side recipe that avoids repeated server round-trips. ’s AJAX idea works well for large or dynamic datasets, but the demo linked by shows the usual pitfall: the filter logic only reads one control and replaces the whole list, so additional selects appear to “break” filtering. Two safe options: do everything in the browser for a moderate number of items, or send all select values together to the server and return a filtered fragment/JSON.

Client-side pattern (good when the full list is on the page). Store each software row with simple data attributes and run a single filter function that reads all selects and hides non-matches. This is case-insensitive and treats an empty select as “any”:

<!-- example structure -->
<select id="osSelect"><option value="">Any OS</option>...</select>
<select id="typeSelect"><option value="">Any Type</option>...</select>
<select id="licSelect"><option value="">Any License</option>...</select>
<button id="resetBtn" type="button">Reset</button>

<div class="sw-item" data-os="Windows,Mac" data-type="2D" data-lic="Free">App A</div>
<div class="sw-item" data-os="Linux" data-type="3D" data-lic="Commercial">App B</div>
// minimal filtering logic (vanilla JS)
const selects = ['osSelect','typeSelect','licSelect'].map(id=>document.getElementById(id));
const items = Array.from(document.querySelectorAll('.sw-item'));
const tokens = s => (s||'').toLowerCase().split(/\s*,\s*|\s+/).filter(Boolean);

function filter() {
  const vals = selects.map(s=>s.value.toLowerCase());
  items.forEach(it => {
    const data = it.dataset;
    const ok = (!vals[0] || tokens(data.os).includes(vals[0]))
            && (!vals[1] || tokens(data.type).includes(vals[1]))
            && (!vals[2] || tokens(data.lic).includes(vals[2]));
    it.hidden = !ok;
  });
}
selects.forEach(s=>s.addEventListener('change', filter));
document.getElementById('resetBtn').addEventListener('click', ()=>{ selects.forEach(s=>s.value=''); filter(); });

Server-side notes: send all selects together (GET/POST with os/type/license). Build WHERE clauses only for non-empty params, use prepared statements to avoid SQL injection, return JSON or an HTML fragment and replace the results container. Troubleshooting tips: confirm each <select> has a unique id/name, log selected values in the console, and check network requests when using AJAX. For very large datasets use pagination or incremental loading and keep the selects populated from real categories to avoid “no matches.”

Recommended Answers

All 3 Replies

Member Avatar for Bachu

In your listing page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<label for="filterBox">Box1</label>
<select name="filterBox" id="filterBox">
<option value="">- Select -</option>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
</select><br />
<div class="filterResults">
<h1>Windows</h1>
<h1>Linux</h1>
</div>
<script type="text/javascript">
$(function(){

    $('#filterBox').change(function(){
        var Value=$(this).val();
        $.post('filter.php', {selectedValue: Value}, function(data) {
            if(data) $('.filterResults').html(data);
            else location.reload();
        });
    });

});
</script>

</body>
</html>

In filter.php

<?php
if($_REQUEST['selectedValue']) {

    //here print the datas from database related to the selected value
    echo '<h1>'.$_REQUEST['selectedValue'].'</h1>';   
}
?>
Member Avatar for keven.pirritano

THank you for replying, but could you provide a little instructions on how to set this up becasue I have three dropdowns that I need:

 Operating System - Type  - Free/ Commercial  - RESET
        Windows        2D            Free
          Mac          3D         Commercial
         Linux       2D & 3D   Free & Commercial

I apoligize for not be specific before and relating my experience with PHP. However, an instructions would be nice and how to create a rest button sothe list will go back to it's original state.

Member Avatar for keven.pirritano

Alright I have been messing with it, but if I add another dropdown box it doesn't work like it should. See example at http://zanime.net

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.