Javascript - 如果选择了下拉列表,则更改容器中的图像

时间:2010-08-06 15:17:38

标签: javascript list drop-down-menu

嘿伙计们。我试图用我认为简单的javascript来改变容器中的图像,但似乎无法弄明白。 “cover-image”是图像所在的容器,“txtMontage”是下拉列表的ID。如果我按原样运行,不管我选择图像是由第一个if语句设置的,然后下拉卡在上面,所以我不能选择任何其他内容。

有关如何解决此问题的任何想法?感谢。

<script type="text/javascript">
    function showPreview() {

        var image = document.getElementById("cover-image");
        var dropd = document.getElementById("txtMontage");

        if (dropd.value = "abrasives") {
            var container= "img/abrasives.jpg";
            image.src = container;
        }
        else if (dropd.value = "industrial") {
            var container= "img/gen-industrial.jpg";
            image.src = container;
        }

    }
</script>

3 个答案:

答案 0 :(得分:1)

您在条件中指定=而不是==

使用:

if (dropd.value == "abrasives") {

而不是:

if (dropd.value = "abrasives") {

答案 1 :(得分:1)

您需要更改if to say

 if (dropd.value == "abrasives")

在javascript =中设置对象的值,==用于比较

答案 2 :(得分:0)

<script language="javascript">
function jsDropDown(imgid,folder,newimg){
document.getElementById(imgid).src = "http://mcxbazaar.com/Abazar_new/Abazar_html_them2/" + folder + "/" + newimg + ".jpg"; 

}


</script>

<div style="width:600px; height:300px;">
<div style="float:left; width:280px;"> <select class="input_select" name="products"   onchange="jsDropDown('rahul','images',this.value)">

                             <option value="PALLET-RACKING">Pallet Racking</option>
                          <option value="SLOTTED-ANGLE-RACKING">Slotted Angel</option>
                          <option value="BOLT-FREE">Bolts Free</option>
                          <option value="Pallet-Rack">Rack Supported Plateform</option>
                          <option value="PLASTIC-BINS">Plastic Bins</option>
                            </select></div>
        <div style="float:left; width:280px; height:300px">
        <img src="http://mcxbazaar.com/Abazar_new/Abazar_html_them2/images/PALLET-RACKING.jpg" width="300" height="300" id="rahul" ></div>
</div>