根据 2 个下拉值显示图像

Question

我希望你能帮助我。我需要根据 2 个下拉值的选择更改图像。我有许多图像变体来显示任何选项。我有一些代码选择，我知道这些代码与图像的文件名有关，但我似乎无法找到一种方法来实际显示该图像。我从之前的答案中获取了代码，但我无法让它为我工作 - .

这是我正在使用的代码：

$('select.form-control').change(function() {
    var file = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});

<select class="form-control" id="shape" name="shape">
  <option value="a">Select a country</option>
  <option value="b">Canada</option>
  <option value="c">U.S.A.</option>
</select><br>
<select class="form-control" id="waist" name="waist">
  <option value="1">Select a country</option>
  <option value="2">Canada</option>
  <option value="3">U.S.A.</option>
  <option value="4">India</option>
</select><br>
<img id="imgToChange">

我哪里错了？

提前致谢！

Answer 1

您的变量名应该是 filename 而不仅仅是 file，因为这是您在代码中使用的名称。这就是你需要的。

$('select.form-control').change(function() {
   var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
   $('#imgToChange').prop('src', filename);
});

更新

如果您要从文件夹 img 中提取图像，那么您需要这样做：

$('#imgToChange').prop('src', 'img/'+filename);

Answer 2

您存储图像文件名的变量与您作为图像 src 标签

的值传递的变量不同

$('select.form-control').change(function() {
   var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
   $('#imgToChange').attr('src', filename);
});

您也可以像我一样尝试使用 .attr() 方法代替 .prop() 方法

更新见下面的代码 HTML

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>
<img id="imgElem" src="" alt="">

JS

var imageSrc;
var imgFolder = "/path/to/image/folder/"; // specify the path to the folder containing the imgs in this variable

$("select").change(function(){
    imageSrc = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    $("#imgElem").attr("src", imageSrc);
    $("p").text(imageSrc);
});

再次更新

此更新会在每次 selected 选项时创建 img 标签，替换之前的 img 标签。这是为了防止页面加载时出现 img src(undefined) 错误。

为了存档，我在 html 中添加了一个 div 来容纳 img 元素，并简单地更改 div html 内容。

HTML 已更新

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>

<p></p> <!--  just for debugging -->
<div class="img-wrap"></div> <!-- a div to hold the image -->

JS 已更新

// specify the path to the folder containing the imgs in this variable
var imgFolder = "/path/to/image/folder/"; 

$("select").change(function(){
    var src; // variable to hold the src
    
    src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    // append src to a p element just for debugging sake(i.e to see the change in the src)
    $("p").text(src);
    
    // create an img element with the src each time and append to the image wrap div
    $(".img-wrap").html(`<img src="${src}">`);
});

再次更新

为了让它在页面加载和选项 select 上显示带有默认 selected 选项的图像，我再次调整了代码

新 JS 代码

function getImageSrc(){
    // specify the path to the folder containing the imgs in this variable
    var imgFolder = "/path/to/image/folder/"; 

    // loop through each select element
    $("select").each(function(){
        // fire function to get src
        getSrc();
        
        // fire function to get src on change
        $(this).change(function(){
            getSrc();
        })
    });
    
    function getSrc(){
        var src; // variable to hold the src

        src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
        $("#imgElem").attr("src", src);
        // append src to a p element just for debugging sake(i.e to see the change in the src)
        $("p").text(src);

        // create a an img element with the src each time and append to the image wrap div
        $(".img-wrap").html(`<img src="${src}">`);
    }
}

// fire function on page-load
$(document).ready(function(){
    getImageSrc();
})

根据 2 个下拉值显示图像

Display Image Based on 2 Dropdown Values

html

javascript

sql

jquery

drop-down-menu