Question

我在互联网上搜索过，找到了一些smilair选项，但这不是我想要的......

我有一些带有颜色代码的下拉选项，我希望我的客户更改图像的颜色，但部分更改。在这种情况下，我有2种颜色选择，有时我有6种颜色。

所以如果我选择颜色“0000ff”

<select name="color1">
  <option>ff0000</option>
  <option>ffff00</option>
  <option>0000ff</option>
  <option selected="selected">00ffff</option>

我需要脚本来更改图像的第一种颜色。

<img src="http://www.ballonnenkoerier.nl/beta/image/catalog/merge.php?color1=ff6600&color2=ff0066"/>

我使用的脚本不是为此制作的，而是给了我一个基础......我被卡住了......

我希望有人会帮助我。我已经制作了一个JSFiddle来简化它：

http://jsfiddle.net/9q5Lcsa3/1/

谢谢，凯文

Answer 1

UPDATED DEMO

你需要这样的东西。

$("select").change(function () {
    var counter = 0;
    var arr = $(this).map(function(){ return $(this).val(); }).get().map(function(x){
        return "color" + (++counter) + "=" + x;
    });
    $('img').attr('src', function (_, src) {
        return src.replace(/\?.*/,"?") + arr.join("&");
    });
});

Answer 2

检查this updated fiddle。

$("select")
    .change(function()
    {
        var str = "http://www.ballonnenkoerier.nl/beta/image/catalog/merge.php?",
            i = 0;
        $("select option:selected").each(function()
        {
            i++;
            str += 'color' + i + '=' + $(this).text() + '&';
        });
        str = str.replace(/&$/, '');
        $("span").text(str);
    })
    .change();

JQuery使用select更改图像URL的一部分

2 个答案:

UPDATED DEMO