Javascript dropdownlist on button/click event

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); 
    } 

Или я мог бы использовать случай переключатель/перерыва заявление вместо если/другими. Цените всю помощь tnx oh и еще одну вещь, которую изображения на моем рабочем столе подумали, что вам может понадобиться эта информация

Answer 1

Вместо того чтобы иметь инструкции 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 2

Вы изучали неправильную переменную. 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 3

Есть несколько ошибок

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 4

Это будет работать, но вам потребуется один, если условие для каждого изображения у вас есть. Почему вы не помещаете все изображения в одну папку и не создаете конкатенацию строк изображения?

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

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); 
});