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

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-属性。喜欢:

<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>

之后，您的更改可以是，例如:

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