Question

I’ve created a table with a dropdown menu which will be used as a comparison chart. When the user selects a product from the dropdown the cells in the column bellow are populated with the details of the product which are stored in an array.

So far this is working great but I’m having a problem to add a if/else statement to the script so that instead of just listening to the dropdown of col2 we would also detect a product selection from col3 or col4.

$(".select2").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
}

As you can see right now I’m listening to the change in the dropdown “select2” which has the class col2 and then writes to the td’s with the ID col2. I can’t beat my had around how I can make the script also detect a change to col3 and col4.

The full table

<h3>Product Comparision Chart Test</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
    <th class="center"></th>
    <th>
        <select class="col2 select2">
            <option>Prod1</option>
            <option>Prod2</option>
            <option>Prod3</option>
            <option>Prod4</option>
        </select>
    </th>
    <th>
        <select class="col3 select3">
            <option>Prod1</option>
            <option>Prod2</option>
            <option>Prod3</option>
            <option>Prod4</option>
        </select>
    </th>
    <th>
        <select class="col4 select4">
            <option>Prod1</option>
            <option>Prod2</option>
            <option>Prod3</option>
            <option>Prod4</option>
        </select>
    </th>
 </tr>
</thead>
<tbody>
<tr>
    <td><strong>Logo</strong></td>
    <td class="col2 logo"></td>
    <td class="col3 logo"></td>
    <td class="col4 logo"></td>
</tr>
<tr>
    <td><strong>Details 1</strong></td>
    <td class="col2 d1"></td>
    <td class="col3 d1"></td>
    <td class="col4 d1"></td>
</tr>
<tr>
    <td><strong>Details 2</strong></td>
    <td class="col2 d2"></td>
    <td class="col3 d2"></td>
    <td class="col4 d2"></td>
</tr>
  <tr>
    <td><strong>Details 3</strong></td>
    <td class="col2 d3"></td>
    <td class="col3 d3"></td>
    <td class="col4 d3"></td>
  </tr>
  <tr>
    <td><strong>Details 4</strong></td>
    <td class="col2 d4"></td>
    <td class="col3 d4"></td>
    <td class="col4 d4"></td>
  </tr>
 <tr>
    <td><strong>Rating Icons</strong></td>
    <td class="col2 rating"></td>
    <td class="col3 rating"></td>
    <td class="col4 rating"></td>
  </tr>
  <tr>
    <td><strong>Link to website</strong></td>
    <td class="center"><a href="#" target="_blank" class="button-more">link button</a></td>
    <td class="center"><a href="#" target="_blank" class="button-more">Link Button</a></td>
    <td class="center"><a href="#" target="_blank" class="button-more">Link button</a></td>
  </tr>
  </tbody>
</table>

The JS

var data = {
"brokers":
    {
    "broker": [
        {
        "name": "Prod1",
        "logo": "P1 Logo",
        "d1": "Specs of this",
        "d2": "Some Details",
        "d3": "More text about this",
        "d4": "Even more details here",
        "rating": "3 stars"
        },
    {
        "name": "Prod2",
        "logo": "P2 Logo",
        "d1": "Specs here",
        "d2": "Details go here",
        "d3": "wow, more text",
        "d4": "Even more text and details",
        "rating": "1 stars"
        },
    {
        "name": "Prod3",
        "logo": "P3 Logo",
        "d1": "Specs and stuff",
        "d2": "Details or some other things",
        "d3": "More details go here wow",
        "d4": "Almost forgot - more here",
        "rating": "5 stars"
        },
    {
        "name": "Prod4",
        "logo": "P4 Logo",
        "d1": "Specs, stuff etc",
        "d2": "Some other things",
        "d3": "What should I say",
        "d4": "details go here wow",
        "rating": "4 stars"
        }
    ]}
};

$(".select2").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
}
$.each(data.brokers.broker, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".logo").html(v.logo);
        $("td." + whichCol + ".d1").html(v.d1);
        $("td." + whichCol + ".d2").html(v.d2);
        $("td." + whichCol + ".d3").html(v.d3);
        $("td." + whichCol + ".d4").html(v.d4);
        $("td." + whichCol + ".rating").html(v.rating);
        return;
    }
});

});

I would also like to change the jQuery for “logo” to change the src of an image like the products logo for example. I’ve been looking around Stack Overflow and some other sites but can’t figure out to solve either one of the two problems myself… yes, I’m not a big java guru but any help is much appreciated.

The code is also up on my jsfiddle

Answer 1

Please try this:

Just replace this in your javascript file.

$("select").change(function() {
    var jthis = $(this);
    var whichCol;

       if(jthis.attr("class")=="col2 select2")
       {
           whichCol = "col2";
       }
       else if(jthis.attr("class")=="col3 select3")
       {
           whichCol = "col3";
       }
       else if(jthis.attr("class")=="col4 select4")
       {
           whichCol = "col4";
       }

    $.each(data.brokers.broker, function(i, v) {
        if (v.name == jthis.val()) {
            $("td." + whichCol + ".name").html(v.name);
            $("td." + whichCol + ".logo").html(v.logo);
            $("td." + whichCol + ".d1").html(v.d1);
            $("td." + whichCol + ".d2").html(v.d2);
            $("td." + whichCol + ".d3").html(v.d3);
            $("td." + whichCol + ".d4").html(v.d4);
            $("td." + whichCol + ".rating").html(v.rating);
            return;
        }
    });

});