这是显示图像的收件箱，当我在下拉点击，当我改变下拉改变它选择

Question

<script> 
var g; 
function pic() 
{ 
document.getElementById("aj").src = "g"; 
switch (g) 
{ 
case 'aj': 
    alert("aj.jpg"); 
    break; 
case 'aj1': 
    alert("aj1.jpg"); 
    break; 
case 'aj2': 
    alert("aj2.jpg"); 
    break; 
} 
} 
</script> 

<div style="float:left; width:280px;"> 
    <select class="input_select" onchange="pic('aj',this.value)"> 
     <option value="o">select</option> 
     <option value="aj.jpg">aj</option> 
     <option value="aj1.jpg">ajl</option> 
     <option value="aj2.jpg">aj2</option> 
    </select> 
</div> 
<div style="float:left; width:280px; height:300px"> 
<img src="" width="300" height="300" id="aj"> 
</div> 

怎么办it.this是JavaScript的开关case.and也像dropdown.this是显示图像的收件箱时，我点击下拉菜单，当我更改下拉选择时它会更改。

Answer 1

我有两个版本供您：

1.纯JS：

https://jsfiddle.net/dalinhuang/ggbrdws3/

JS

var selectedPic = document.getElementById('selected_pic'); 
selectedPic.onchange = function() { 
    var picValue = selectedPic.options[selectedPic.selectedIndex].value; //selected value 
    var aj = document.getElementById('aj'); //the image selected 
    aj.src = picValue; 
}; 

HTML

<div style="float:left; width:280px;"> 
    <select class="input_select" id="selected_pic"> 
    <option value="o">select</option> 
    <option value="aj.jpg">aj</option> 
    <option value="aj1.jpg">ajl</option> 
    <option value="aj2.jpg">aj2</option> 
    </select> 
</div> 
<div style="float:left; width:280px; height:300px"> 
    <img src="" width="300" height="300" id="aj"> 
</div> 

2.使用jQuery

试试这个，如果你不介意使用jQuery？： （也尽量不做内嵌脚本和内联样式，将其移动到JS和CSS样式表）

https://jsfiddle.net/dalinhuang/epjb8pjj/2/

JS：

$("#selected_pic").change(function() { 
    var src = $("#selected_pic").val(); 
    $('#aj').attr("src", src); 
}); 

HTML：

<div style="float:left; width:280px;"> 
    <select class="input_select" id="selected_pic"> 
    <option value="o">select</option> 
    <option value="aj.jpg">aj</option> 
    <option value="aj1.jpg">ajl</option> 
    <option value="aj2.jpg">aj2</option> 
    </select> 
</div> 
<div style="float:left; width:280px; height:300px"> 
    <img src="" width="300" height="300" id="aj"> 
</div> 

3 LOL

OK，如果你真的想用开关使用此：

https://jsfiddle.net/dalinhuang/ed2jcj2L/1/

<div style="float:left; width:280px;"> 
    <select class="input_select" id="selected_pic" onchange="pic('aj',this.value)"> 
    <option value="o">select</option> 
    <option value="aj.jpg">aj</option> 
    <option value="aj1.jpg">ajl</option> 
    <option value="aj2.jpg">aj2</option> 
    </select> 
</div> 
<div style="float:left; width:280px; height:300px"> 
    <img src="" width="300" height="300" id="aj"> 
</div> 

<script> 
    function pic(input, picValue) { 
    var selPic = document.getElementById('selected_pic'); 
    var g = selPic.options[selPic.selectedIndex].text; //selected text 
    var aj = document.getElementById(input); 
    switch (g) { 
     case 'aj': 
     aj.src = picValue; 
     break; 
     case 'aj1': 
     aj.src = picValue; 
     break; 
     case 'aj2': 
     aj.src = picValue; 
     break; 
    } 
    } 
</script>