jQuery/更改图像基于下拉选择

jQuery/change image based on dropdown selection

本文关键字：于下拉 选择 图像 jQuery      更新时间：2023-09-26

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

<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

我认为最简单的方法是为您选择的option s添加一些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>

之后，您的change可以，例如:

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

另一种方法是为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("") || ""
    });
});

下面是上述代码的演示。

相关文章：