View Full Version : Customizable Product Comparison

05-11-2007, 06:40 AM

I understand my title might not make sense, but I'll do my best to explain it.

Basically, I'm looking for a method of comparing software products for my website. I figured JavaScript was the best method of doing this.

What I want:

There will be 5 products.

Product #1
Product #2
Product #3
Product #4
Product #5

Now, before any information on any product is displayed, there will be 3 select fields. Each select field will contain the products. The visitor will select 3 of the products and the below table will vertically organize the products in a table with each products features.

I have done a visual representation of my idea, sorry if it's poorly done.


If anyone has any questions regarding this, feel free to post.

Thank you very much for any assistance anyone can provide! :D

05-11-2007, 03:06 PM
So baisically you just want to let the user compare up to 3 different products side by side? I'll give it a go when I get home.

05-11-2007, 03:07 PM
Yes that's exactly it. Thank you very much :)

I look forward to seeing what you make.

05-11-2007, 10:54 PM
<script type="text/javascript">
var features = [];
features['product1'] = 'These are the features of <b>product 1</b>.';
features['product2'] = 'These are the features of <b>product 2</b>.';
features['product3'] = 'These are the features of <b>product 3</b>.';
features['product4'] = 'These are the features of <b>product 4</b>.';
features['product5'] = 'These are the features of <b>product 5</b>.';
features['product6'] = 'These are the features of <b>product 6</b>.';
features['product7'] = 'These are the features of <b>product 7</b>.';
features['product8'] = 'These are the features of <b>product 8</b>.';
features['product9'] = 'These are the features of <b>product 9</b>.';

function compareProducts(sel, suffix){
if (sel.value!=""){

else { //nothing selected, set to default
document.getElementById("header"+suffix).innerHTML='Product here';

document.getElementById("features"+suffix).innerHTML='Product features here';
<style type="text/css">
.default {
.selected {
<select name="selProduct1" onchange="compareProducts(this, 1);">
<option value="">Select Product</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
<select name="selProduct2" onchange="compareProducts(this, 2);">
<option value="">Select Product</option>
<option value="product4">Product 4</option>
<option value="product5">Product 5</option>
<option value="product6">Product 6</option>
<select name="selProduct3" onchange="compareProducts(this, 3);">
<option value="">Select Product</option>
<option value="product7">Product 7</option>
<option value="product8">Product 8</option>
<option value="product9">Product 9</option>

<table border="1">
<th id="header1" class="default">Product here</th>
<th id="header2" class="default">Product here</th>
<th id="header3" class="default">Product here</th>
<td id="features1" class="default">Product features here</td>
<td id="features2" class="default">Product features here</td>
<td id="features3" class="default">Product features here</td>

05-11-2007, 11:00 PM
Oh wow, thank you very much!!! :D

05-12-2007, 05:36 AM
Glad to help. :)