Question

我有一个现有的电子商务页面，我有一个下拉菜单的代码：

<select data-optgroup="10201" class="prodoption detailprodoption" onchange="updateoptimage(0,0)" name="optn0" id="optn0x0" size="1"><option value="">Please Select...</option><option value="102011" class="">Small</option>
<option value="102012" class="">Medium</option>
<option value="102013" class="">Large</option>
<option value="102014" class="">XL</option>
<option value="102015" class="">2XL (+$3.00)</option>
<option value="102016" class="">3XL (+$5.00)</option>
<option value="102017" class="">4XL (+$7.00)</option>
<option value="102018" class="">5XL (+$7.00)</option>
</select>

我需要能够插入图像并根据下拉选项更改图像。我知道如何使用jquery函数插入图像，但不知道如何更改它。这应该是一个相对容易的任务，但似乎无法弄明白。我想我需要设置一个数组，该数组匹配我想要的img src的下拉值。如果可能的话，我还想包含一个通过PHP生成的php变量。我确定这是一个热点，但我能得到的任何方向都值得赞赏。

var phpcode = [ <?php = ...... ?> ]
var pictureList = 
    [ '10211' , 'images/sample1'],
    [ '10212' , 'images/sample2'],
    [ '10213' , 'images/sample3'],
    [ '10214' , 'images/sample4'],
    [ '10215' , 'images/sample5'];


$('.detailprodoption').change(function () {
    $('img').attr("src",pictureList[],phpcode[],".jpg");
});

我需要最终输出类似于“images / sample5-phpcode.jpg

Answer 1

我认为最简单的方法是在您的选择data-中添加一些option属性。像：

<select data-optgroup="10201" class="prodoption detailprodoption">
    <option value="1000" data-img-src="some/path/img1.jpg">value</option>
    <option value="1001" data-img-src="some/path/img2.jpg">value</option>
    <option value="1002" data-img-src="some/path/img3.png">value</option>
    <!-- More options here -->
</select>

之后，change可以是，例如：

$('.detailprodoption').change(function () {
    $('img').attr("src", $( this ).find( "option:selected" ).data( "img-src" ));
});

Answer 2

另一种方法是为pictureList生成有效的数据结构，因为您现在拥有的内容无效。接下来可能是你所追求的。

var phpcode = "whatisthis";
//Generate a proper data structure
var pictureList = {
    '102012': 'images/sample2',
    '102013': 'images/sample3',
    '102014': 'images/sample4',
    '102015': 'images/sample5',
    '102016': 'images/sample6',
    '102017': 'images/sample7',
    '102018': 'images/sample8'
};

$('.detailprodoption').change(function() {
    //Set image src when the selected value isn't empty
    $('img').attr({
        "src": this.value && [pictureList[this.value], "-", phpcode, ".jpg"].join("") || ""
    });
});

以上代码为a demo。

jQuery / javascript - 根据下拉选择更改图像

2 个答案: