更改多个选项ul li

在我的网上商店，我有多个选项，并通过每个选项图像的变化。客户可以看到它的样子。更改多个选项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>

当选择这些选项中颜色的图像的变化。我用这个下面的JavaScript，这增加了全自动“颜色1 =红色&”和“颜色2 =红&”等等等等

<script> 
    $("select") 
     .change(function() { 
      var str = "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&", 
      i = 0; 
      $("select option:selected").each(function() { 
       i++; 
       str += 'color' + i + '=' + $(this).text() + '&'; 
      }); 
      str = str.replace(/&$/, ''); 
      $('#thumbnail').attr('src', str); 
     }) 
    .change(); 
</script>

，图像被这样工作：

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

我问题：

我想做出另一个下拉列表（这是更友好的，因为我可以显示颜色，使用< ul> < li>列表，但然后JavaScript不工作了。

有没有可能改变使用这种方法的JavaScript？

我有一个的jsfiddle把这个： http://jsfiddle.net/j0dv6ywe/

我希望有人有答案给我！

来源

2015-02-07 Kevin Den Dulk

将UL李代码作为小提琴发布您正在尝试使用ul li以便理解更多.... – 2015-02-07 23:02:40

意味着你的名单看起来是这样的......

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

而且像你建议，以显示颜色已应用的造型。

那么你的jQuery的处理器也可以是这样的......

$('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); 

});

试试看吧，你可以看到我是如何试图以使其适应您的情况？让我知道这是否有帮助，或者如果我可以进一步帮助？

来源

2015-02-07 23:02:20

更改多个选项ul li

回答

相关问题