[zerojava]

Всем доброй ночи! Есть работающий скрипт динамических списков сделанный на основе этого примера. Значение в следующем селекте зависит от значения в предыдущем и т.д. Подскажите пожалуйста как сделать чтобы каждому пункту в списках соответствовала свая картинка, которая отображалась бы рядом?

В яваскрипте я к сожалению не разбираюсь, поэтому если кто знает где есть похожий пример зависимых списков с картинками просьба поделиться ссылкой!

<script type="text/javascript">
function syncList(){}
syncList.prototype.sync = function()
{
  for (var i=0; i < arguments.length-1; i++)  document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]);
  document.getElementById(arguments[0]).onchange();
}

syncList.prototype._sync = function (firstSelectId, secondSelectId)
{
  var firstSelect = document.getElementById(firstSelectId);
  var secondSelect = document.getElementById(secondSelectId);

  secondSelect.length = 0;
  
  if (firstSelect.length>0)
  {
    var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ];
    for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key);
    
    if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 );
    if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 );
  }
  secondSelect.onchange && secondSelect.onchange();
};
</script>

<select id="List1">
  <option value="s1">1</option>
  <option value="s2">2</option>
</select>
<select id="List2"></select>
<select id="List3"></select>
<select id="List4"></select>
 
<script type="text/javascript">
var syncList1 = new syncList;
  syncList1.dataList = {

  's1':{
      's11':'11',
      's12':'12'
  },
  
  's2':{
      's21':'21',
      's22':'22'
  },

  's11':{
      's111':'111',
      's112':'112'
  },

  's12':{
      's121':'121',
      's122':'122'
  },

  's21':{
      's211':'211',
      's212':'212'
  },

  's22':{
      's221':'221',
      's222':'222'
  },

  's111':{
      '4.8':'1111',
      '5.1':'1112'
  },
  
  's112':{
      '5':'1121',
      '5.1':'1122'
  },
  
  's121':{
      '3.5':'1211',
      '3.8':'1212'
  },
  
  's122':{
      '3.5':'1221',
      '3.8':'1222'
  },

  's211':{
      '4.8':'2111',
      '5.1':'2112'
  },
  
  's212':{
      '5':'2121',
      '5.1':'2122'
  },
  
  's221':{
      '3.5':'2211',
      '3.8':'2212'
  },
  
  's222':{
      '3.5':'2221',
      '3.8':'2222'
  },
                               
};

syncList1.sync("List1","List2","List3","List4");
</script>