更改多個選項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

回答

相關問題