JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<select id="product_option1">
    <option>Select Option1</option>
    <option value="1">option1 #1</option>
    <option value="2">option1 #2</option>
    <option value="3">option1 #3</option>
</select>

<select id="product_option2">
    <option>Select product option 2</option>
    <option value="4">option2 #1</option>
    <option value="5">option2 #2</option>
    <option value="6">option2 #3</option>
</select>

<select id="product_option3">
    <option>Select product option 3</option>
    <option value="7">option3 #1</option>
    <option value="8">option3 #2</option>
    <option value="9">option3 #3</option>
</select>

<br>
<input type="radio" name="group1" value="9"> some option 1
<input type="radio" name="group1" value="8" checked> some option 2 
<input type="radio" name="group1" value="7"> some option 3

<hr>
<div>
    <span id="prod-titlex"></span> <span id="prod-titley"></span> <span id="prod-titlez"></span>
</div>
<div id="prod">
    <img id="prod-image2" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/> 
    <!-- base-->
    <img id="prod-imagex" style="z-index:1;"/>
    <img id="prod-imagey" style="z-index:1;"/>
    <img id="prod-imagez" style="z-index:1;"/>
</div>

CSS

#prod IMG
{position:absolute; // to ensure the images has the same origin
top:65px;
left:35px;}

JavaScript

var data = {
    "1" : { img: "http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png", label: "No Pocket 1" },
    "2" : { img: "http://img1.uploadhouse.com/fileuploads/16067/160676947904ac6154e09568ebd0c79abf750e54.png", label: "Pocket 2" },
    "3" : { img: "http://img4.uploadhouse.com/fileuploads/16067/16067692c485e60a6dde8d91d8ebb5a0587afc23.png", label: "Pocket 3" },
    "4" : { img: "http://img9.uploadhouse.com/fileuploads/16067/16067695c0ba9e548a8dfaa3aeb35dc760d18355.png", label: "French Collar" },
    "5" : { img: "http://img8.uploadhouse.com/fileuploads/16067/16067696b8890bf17dde3d7b78a9bafab61e3eab.png", label: "Chinese Collar" },
    "6" : { img: "http://img3.uploadhouse.com/fileuploads/16067/16067697f12d5177edfaeb9f8d4d9590def4ede3.png", label: "Martian Collar" },
    "7" : { img: "http://img1.uploadhouse.com/fileuploads/16068/16068104f1f4e567dd9509f2f86dc7219ea41125.png", label: "No Button" },
    "8" : { img: "http://img6.uploadhouse.com/fileuploads/16068/1606810362f68f55f0d1b3338f6584089430d522.png", label: "Simple Buttons" },
    "9" : { img: "http://img7.uploadhouse.com/fileuploads/16068/1606810224789b7016f06aaf796570e0677afa81.png", label: "Clown Buttons" },
};

$('#product_option3,#product_option2,#product_option1').change(function() {
    var i;
    switch (this.id){
        case 'product_option1':
            i = 'x';
            break;
        case 'product_option2':
            i = 'y';
            break;
        case 'product_option3':
            i = 'z';
            break;
    }
    var value = $(this).val();
    if (data[value] != undefined)
    {
        $('#prod-image'+i).attr('src', data[value].img);
        $('#prod-title'+i).text(data[value].label);
        //$('#prod').append('<span class="change" id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');
        // append test - two problems - 1- how to remove ?? 2 - how to devide into groups ?
    }
});

//more...