Javascript 使用ul li更改多个选项

在我的网店里，我有多个选项，每个选项都会改变图像。顾客可以看到它的样子

例如：

<label>color group 1</label>
<select>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
</select>

<label>color group 2</label>
<select>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
</select>

颜色组1
红色
黄色的
蓝色
颜色组2
红色
黄色的
蓝色

选择这些选项时，图像的颜色会发生变化。为此，我使用了以下javascript，它自动添加了“color1=red&”和“color2=red&”等

$（“选择”）
.改变（功能）{
var str=”http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=&",
i=0；
$（“选择选项：选定”）。每个（函数（）{
i++；
str+='color'+i+'='+$（this）.text（）+'&'；
});
str=str.replace（/&$/，“”）；
$（'缩略图'）.attr（'src'，str）；
})
.change（）；

图像是这样工作的：

    <img id="thumbnail" src="image/catalog/designer/image.php?product_id=50&color1=red&color2=yellow&color3=blue&" title="image" alt="image" />

我的问题:

我想制作另一个下拉列表（更友好，因为我可以使用

• 列表显示颜色，但是javascript不再工作
  是否有可能更改使用此方法的javascript
  我把它放在一个JSFIDLE中：

  ---

  我希望有人能为我找到答案！！
  假设你的清单是这样的

  <ul>
    <li class="red">Red</li>
    <li class="yellow">Yellow</li>
    <li class="blue">Blue</li>
  </ul>
  

  $('ul li').click(function() {
  
   $(this).parent().find('.selected').removeClass('selected');
   $(this).addClass('selected');
  
   var str =  "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
          i = 0;
          $( "ul li.selected" ).each(function() {
              i++;
              str += 'color' + i + '=' + $( this ).text() + '&';
          });
          str = str.replace(/&$/, '');
          $('#thumbnail').attr('src', str);
  
  });
  

  
  红色
  黄色
  蓝色
  
  

  你已经按照你的建议运用了造型来展示颜色
  那么您就是jQuery处理程序，它可能是这样的

  <ul>
    <li class="red">Red</li>
    <li class="yellow">Yellow</li>
    <li class="blue">Blue</li>
  </ul>
  

  $('ul li').click(function() {
  
   $(this).parent().find('.selected').removeClass('selected');
   $(this).addClass('selected');
  
   var str =  "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
          i = 0;
          $( "ul li.selected" ).each(function() {
              i++;
              str += 'color' + i + '=' + $( this ).text() + '&';
          });
          str = str.replace(/&$/, '');
          $('#thumbnail').attr('src', str);
  
  });
  

  $（'ulli'）。单击（函数（）{
  $（this.parent（）.find（'.selected'）.removeClass（'selected'）；
  $（this.addClass（'selected'）；
  var str=”http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=&",
  i=0；
  $（“ul li.selected”）。每个（函数（）{
  i++；
  str+='color'+i+'='+$（this）.text（）+'&'；
  });
  str=str.replace（/&$/，“”）；
  $（'缩略图'）.attr（'src'，str）；
  });
  

  ---

  试一试，你能看到我是如何使它适应你的情况的吗？让我知道这是否有帮助，或者我是否能进一步帮助你？
  将UL Li代码作为一个提琴发布，你正在使用UL Li尝试做什么，以便能更了解。。。。