Jquery select that effects the amount of images
<p>I have a table with multiple rows, each row has:</p>

<ul>
<li>layout (select)</li>
<li>images * 10 </li>
</ul>

<p>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.</p>

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

<pre><code>$('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();
})
</code></pre>

<p>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?</p>

<p>HTML Table</p>

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

<p>EDIT: @Kalle H. Väravas code</p>

<pre><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) &lt;= 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()); 
});
</code></pre>
