Change image using multiple drop down boxes
<p>I'm trying to change an image using two drop down boxes, I'm a complete noob when it comes to jquery/javascript so was wondering if I could get a little help, even if it is just a nudge in the right direction.</p>

<p>SO here is the problem. I want an upholstery color select and a paint color select, both appear on the same product so would be ideal to have 2 dropdown boxes.</p>

<p>The code I have so far is:</p>

<pre><code>window.onload=function()
{
    var caption=['Default Image Caption',
                'Caption1',
                'Caption2',
                'Caption3',
                'Caption4',
                'Caption5',
                'Caption6',
                'Caption7',
                'Caption8',
                'Caption9'], // This will be your images caption
    bp='images/', //base url of your images
    imgnum=8, //Number of your images. This should match on your comboboxes options.
    thumb=document.getElementById('thumb'), //id of your image that will be changing
    description=document.getElementById('caption'), //id of your caption
    combobox=document.getElementById('paint'); // id of your combobox.
    combobox=document.getElementById('vinyl');

    combobox.onchange=function()
    {
    thumb.src=bp+'Picture'+this.value+name+'.jpg';
    description.innerHTML=caption[this.value];
    }
}
</code></pre>

<p>and the HTML is</p>

<pre><code>&lt;label&gt;Change the Paint: &lt;/label&gt;
&lt;select id="paint"&gt;
&lt;option&gt;Change Picture&lt;/option&gt;
&lt;option value="1"&gt;Image 1&lt;/option&gt;
&lt;option value="2"&gt;Image 2&lt;/option&gt;
&lt;option value="3"&gt;Image 3&lt;/option&gt;
&lt;option value="4"&gt;Image 4&lt;/option&gt;
&lt;option value="5"&gt;Image 5&lt;/option&gt;
&lt;option value="6"&gt;Image 6&lt;/option&gt;
&lt;option value="7"&gt;Image 7&lt;/option&gt;
&lt;option value="8"&gt;Image 8&lt;/option&gt;
&lt;option value="9"&gt;Image 9&lt;/option&gt;
&lt;/select&gt;&lt;br /&gt;
&lt;label&gt;Change the Vinyl: &lt;/label&gt;
&lt;select id="vinyl"&gt;
&lt;option&gt;Change Picture&lt;/option&gt;
&lt;option Name="1"&gt;Image 1&lt;/option&gt;
&lt;option Name="2"&gt;Image 2&lt;/option&gt;
&lt;option Name="3"&gt;Image 3&lt;/option&gt;
&lt;option Name="4"&gt;Image 4&lt;/option&gt;
&lt;option Name="5"&gt;Image 5&lt;/option&gt;
&lt;option Name="6"&gt;Image 6&lt;/option&gt;
&lt;option Name="7"&gt;Image 7&lt;/option&gt;
&lt;option Name="8"&gt;Image 8&lt;/option&gt;
&lt;option Name="9"&gt;Image 9&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Okay so with the help of the kind people below I have resolved this:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    function callAFunction(SelectBox)
    {
        var caption=[
            'Default Image Caption',
            'Caption1',
            'Caption2',
            'Caption3',
            'Caption4',
            'Caption5',
            'Caption6',
            'Caption7',
            'Caption8',
            'Caption9'],
        bp='images/',
        imgnum=8,
        thumb=document.getElementById('thumb'),
        description=document.getElementById('caption');
        thumb.src=bp+'Picture'+paint.value+vinyl.value+'.jpg';
        description.innerHTML=caption[SelectBox.value];
    }

&lt;/script&gt;

&lt;img src="/images/picture1.jpg" alt="" id="thumb" /&gt;

&lt;label&gt;Change the Paint: &lt;/label&gt;
&lt;select id="paint" onChange="callAFunction(this); return false;"&gt;
    &lt;option value="1"&gt;Image 1&lt;/option&gt;
    &lt;option value="2"&gt;Image 2&lt;/option&gt;
    &lt;option value="3"&gt;Image 3&lt;/option&gt;
    &lt;option value="4"&gt;Image 4&lt;/option&gt;
    &lt;option value="5"&gt;Image 5&lt;/option&gt;
    &lt;option value="6"&gt;Image 6&lt;/option&gt;
    &lt;option value="7"&gt;Image 7&lt;/option&gt;
    &lt;option value="8"&gt;Image 8&lt;/option&gt;
    &lt;option value="9"&gt;Image 9&lt;/option&gt;
&lt;/select&gt;&lt;br /&gt;

&lt;label&gt;Change the Vinyl: &lt;/label&gt;
&lt;select id="vinyl" onChange="callAFunction(this); return false;"&gt;
    &lt;option value="1"&gt;Image 1&lt;/option&gt;
    &lt;option value="2"&gt;Image 2&lt;/option&gt;
    &lt;option value="3"&gt;Image 3&lt;/option&gt;
    &lt;option value="4"&gt;Image 4&lt;/option&gt;
    &lt;option value="5"&gt;Image 5&lt;/option&gt;
    &lt;option value="6"&gt;Image 6&lt;/option&gt;
    &lt;option value="7"&gt;Image 7&lt;/option&gt;
    &lt;option value="8"&gt;Image 8&lt;/option&gt;
    &lt;option value="9"&gt;Image 9&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Many thanks for your help!</p>
