Jquery select that effects the amount of images

I have a table with multiple rows, each row has:

• layout (select)
• images * 10

The amount of images depends on the layout selected. I want to write some jquery code that hides/shows the amount of images depending on the layout selected/changed.

At the moment I have this which doesn't work correctly and only shows 1 image each time.

$('select.layouts').bind("change keyup",function(){
var val = $(this).val();
switch(val){
case 1:
    showImgs = 1;
    break;
case 2:
    showImgs = 2;
    break;
case 3:
    showImgs = 3;
    break;
case 4:
    showImgs = 4;
    break;
default:
    showImgs = 1;
}
$(this).parents("tr").find(".images .image:lt("+showImgs+")").show();
})

Also would it be best practice to instead of adding how many images per layout into the JS code, I have a data attribute to the select option?

HTML Table

<table class="list" id="images">
    <thead>
        <tr>
            <td>Layout:</td>
            <td>Image:</td>
        </tr>
    </thead>
    <tbody id="image-row0">
        <tr>
            <td>
                <select class="layouts" name="banner_image[0][layout]">
                    <option value="1">Layout 1</option>
                    <option selected="selected" value="2">Layout 2</option>
                    <option value="3">Layout 3</option>
                    <option value="4">Layout 4</option>
                    <option value="5">Layout 5</option>
                    <option value="6">Layout 6</option>
                    <option value="7">Layout 7</option>
                    <option value="8">Layout 8</option>
                    <option value="9">Layout 9</option>
                    <option value="10">Layout 10</option>
                </select>
            </td>
            <td class="left images">
                <div style="display: none" class="image">
                    <label for="thumb0">Image 1</label><br>
                    <input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb20">Image 2</label><br>
                    <input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb30">Image 3</label><br>
                    <input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb40">Image 4</label><br>
                    <input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb50">Image 5</label><br>
                    <input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb60">Image 5</label><br>
                    <input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
                </div>
            </td>
        </tr>
    </tbody>
    <tbody id="image-row1">
        <tr class="odd">
            <td>
                <select class="layouts" name="banner_image[1][layout]">
                    <option selected="selected" value="1">Layout 1</option>
                    <option value="2">Layout 2</option>
                    <option value="3">Layout 3</option>
                    <option value="4">Layout 4</option>
                    <option value="5">Layout 5</option>
                    <option value="6">Layout 6</option>
                    <option value="7">Layout 7</option>
                    <option value="8">Layout 8开发者_JAVA技巧</option>
                    <option value="9">Layout 9</option>
                    <option value="10">Layout 10</option>
                </select>
            </td>
            <td class="left images">
                <div style="display: none" class="image">
                    <label for="thumb0">Image 1</label><br>
                    <input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb20">Image 2</label><br>
                    <input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb30">Image 3</label><br>
                    <input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb40">Image 4</label><br>
                    <input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb50">Image 5</label><br>
                    <input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb60">Image 5</label><br>
                    <input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
                </div>
            </td>
        </tr>
    </tbody>
</table>

EDIT: @Kalle H. Väravas code

var layouts_data = {
    0: {
        name: 'None',
        images: 0
    },
    1: {
        name: 'Layout 1',
        images: 1
    },
    2: {
        name: 'Layout 2',
        images: 4
    },
    3: {
        name: 'Layout 3',
        images : 6
    },
    4: {
        name: 'Layout 4',
        images: 4
    },
    5: {
        name: 'Layout 5',
        images: 5
    }
};


SetLayout = function (row, layoutid) {
    var current_layout = layouts_data[layoutid];
    $(row).find('.image').hide().each(function (i, elm) {
        if ((i + 1) <= current_layout['images']) {
            $(elm).show();
        }
    });
};

$(document).ready(function () {
    $('#images tbody tr').each(function(i, elm) {
        SetLayout($(this), $(this).find('select.layouts option:selected').val());
    });
});

// Lets catch the event
$('select.layouts').bind("change keyup", function () {
    SetLayout($(this).parents("tr"), $(this).val()); 
});

---

Replace your switch statement with:

var showImgs = 1;
if (val < 5) showImgs = val;

I'd probably run val through parseInt(val, 10) for good measure too.

---

Revision 1

As reading your comments and understand the issue better. I have composed a nice little layout-array. This way you can store more data and basically just pick the layout with the select.

http://jsfiddle.net/hobobne/FxU6V/1/

General idea stays the same, but little bit more complex.

Original

I might have understood you wrong, but this is what I got to offer:

<style>
.imgs {margin: 5px; width: 100px; height: 100px; float: left; display: none;}
</style>
Show how many images: <select name="show-images">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<div class="imgs" style="background: yellow;"></div>
<div class="imgs" style="background: blue;"></div>
<div class="imgs" style="background: green;"></div>
<div class="imgs" style="background: brown;"></div>
<div class="imgs" style="background: pink;"></div>
<script>
$('select[name="show-images"]').bind("change keyup", function () {
    var images_amount = $('select[name="show-images"] option:selected').text();
    $('.imgs').hide().each(function (i, elm) {
        if ((i + 1) <= images_amount) {
            $(elm).show();
        }
    });
});
</script>

^{[ View output ]}

For this example, I used colorful containers instead of the images, but technically it doesn't matter. And as you can see, the fiddle contains comments, so you can understand each step :)

---

I'm not sure if this will solve your problem, but at the moment your switch statement always drops into the 'default' case as it's trying to match an integer and the value in the val variable is a string. Doing a parseInt should fix it-

switch(parseInt(val)){