Question

当用户在下拉列表中选择一个选项时，我正在尝试显示图像，然后在按钮点击后显示图像。这是关于如何做到这一点的想法，但我不太确定它是否正确所以我要求其他人提出意见。

这是我的代码和小提琴：http://jsfiddle.net/Bc6Et/1546/

HTML

<select name="" id="dropdownlist" size="">
    <option value="img1">Image</option>
    <option value="img2">Image</option>
    <option value="img3">Image</option>
    <option value="">so on and so forth</option>
</select>
<input type="button" value="Show Image" onclick="showimg()" class="button">

的javascript / jquery的

 function showimg() {
        var q = document.getElementById("dropdownlist");
        var selected = q.options[q.selectedIndex].value;

        var src = "/var/www/VAA/img";
        if (selected === img1) {
            show_image("/var/www/VAA/img/img1.png");
        }

        elseif(selected === img2) {
            show_image("/var/www/VAA/img2.png");
        }
    }

    function show_image(src, width, height, alt) {
        var img = document.createElement("img");
        img.src = src;
        document.body.appendChild(img);
    }

或者我可以使用case / break switch语句而不是if / else。感谢所有的帮助tnx哦和我的桌面上的图像更多的东西认为你可能需要这些信息

Answer 1

你正在调查错误的变量。 q始终是下拉元素，与选择的选项和/或其各自的值无直接关系 img1和img2必须声明为字符串，因为它们不是变量。

function showimg() {
    var q = document.getElementById("dropdownlist");
    var selected = q.options[q.selectedIndex].value;

    console.log(selected);

var src = "/var/www/VAA/img";
if (selected === "img1") {
    show_image("/var/www/VAA/img");
}

else if (selected === "img2") {
    show_image("/var/www/VAA/img");
    }
}

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    console.log(src);
    document.body.appendChild(img);
}

working fiddle

Answer 2

有几个错误

function showimg() {
    var q = document.getElementById("dropdownlist");
    var selected = q.options[q.selectedIndex].value;

    var src = "/var/www/VAA/img";
    if (selected === "img1") {
        //_____^__________ 
        show_image("/var/www/VAA/img");
    }

    else if(selected === "img2") {
    //__^__________^______
        show_image("/var/www/VAA/img");
    }
}

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    document.body.appendChild(img);
}

FIDDLE

Answer 3

它会起作用，但如果您拥有每张图像，则需要一个条件。为什么不将所有图像放在同一个文件夹上，并构建连接字符串的图像路径？

src = "/var/www/VAA/";
var selected = q.options[q.selectedIndex].value;
show_image(src+selected);

Answer 4

不是每张图片都有if语句，你可以试试这样的东西吗？

<option value="name_of_your_image">Image</option>

然后调用你的函数：

var src = "/var/www/VAA/"+selected+".png";   
show_image(src);

http://jsfiddle.net/Bc6Et/1558/

如果您有大量图片，我认为这是一个更好的选择。

Answer 5

我有一个建议，所以你不必有很多条件语句来识别要显示的图像：如果你将图像src（或者只是文件名，如果你想要的话）作为选择框的选项，如下所示：

<select name="image" id="dropdownlist">
  <option value="/source/for/image1.png">Image 1</option>
  <option value="/source/for/image2.png">Image 2</option>
  <option value="/source/for/image3.png">Image 3</option>
</select>
<input type="button" value="Show Image" class="button" />

然后你可以修改你的jQuery代码：

$('.button').on('click', function() {
  var image = $('<img src="' + $('#dropdownlist').val() + '" />');
  $('body').append(image);
});

按钮/点击事件的Javascript下拉列表

5 个答案: