时间戳

首页 > 解决方案 > 根据 2 个下拉值显示图像

javascript - 根据 2 个下拉值显示图像

问题描述

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

我在哪里错了？

提前致谢！

标签： javascripthtmljquerysqldrop-down-menu

解决方案

您存储图像文件名的变量与您作为图像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);
});

再次更新

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

为了存档这个，我div在 html 中添加了一个来保存img元素，并简单地更改 divs 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}">`);
});

再次更新

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

新的 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();
})

推荐阅读