kentico load product option image with dropdownlist

Question

I need to make something like this - http://www.slopeseeker.com/t-shirts-and-hoodies

Need to display productoption image

Found working code sample with textboxes:
Display product option image Kentico CMS 7 and http://devnet.kentico.com/Forums.aspx?forumid=51&threadid=12268

but i can't find anything about how to do this with dropdownlist,

Here is my non-worked sample:

switch (this.OptionCategory.CategorySelectionType)
        {
        case OptionCategorySelectionTypeEnum.Dropdownlist:

     LocalizedDropDownList dropDown = (LocalizedDropDownList)this.SelectionControl;
     foreach (ListItem item in dropDown.Items) 
            {
                if (item != null)
                {
                    SKUInfo sku = SKUInfoProvider.GetSKUInfo(ValidationHelper.GetInteger(item.Value, 0));

                    if (sku != null && !string.IsNullOrEmpty(sku.SKUImagePath))
                    {

                       item.Attributes.Add("onchange", "jQuery('.fancyboxProductImg').html('<img alt=\"" + sku.SKUName + "\" src=\"" + URLHelper.ResolveUrl(sku.SKUImagePath) + "\" width=\"240\" height=\"240\" />')");

                    }
                }
            }
            break;
    }

Here is my sample in transformation for displaying this image (working with textboxes)

     <%# IfEmpty(Eval("SKUImagePath"), "<img src=\"" + GetSKUImageUrl(240) + "\" class='fancyboxProductImg' alt=\"" + EvalText("SKUName", true) + "\" />", "<a href=\"" + GetSKUImageUrl(960) + "\" class='fancyboxProductImg' title=\"" + EvalText("SKUName", true) + "\"><img src=\"" + GetSKUImageUrl(240) + "\" class='fancyboxProductImg' title=\"" + EvalText("SKUName", true) + "\" /></a>") %>

Answer 1

The problem is that you are binding onchange event to the <option> instead of binding it to the <select> element. The code should look like:

    drp.Items.Add(new ListItem("Ladies T-shirt", "1"));
    drp.Items.Add(new ListItem("Mens T-shirt", "2"));
    string script = @"
function changeImg(drp)
{
var item = drp.value;
switch(item)
{
";
    foreach (ListItem item in drp.Items)
    {
        script += "case '" + item.Value + "': alert('Selected value' + item);break;";
        // Here should be your jQuery('.fancyboxProductImg').html() call - instead of alert
    }

    script += "}}";

    ScriptHelper.RegisterClientScriptBlock(this, typeof(string), "myscript", script, true);
    drp.Attributes.Add("onchange", "changeImg(this);");