Question

我对javascript很新，还在学习。我正在尝试根据用户选择从下拉列表中更改div中的文本和图像。我可以改变图像或改变文本但不能同时改变。如果有人能指出我正确的方向并告诉我在我的代码中哪里出错了，我将不胜感激。代码如下：

的Javascript

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;    


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");
    var textGrey2 = document.getElementById("textGrey2");

    if(dropd.value == "images/1.jpg"){

        model.innerHTML = "A4";
        heading.innerHTML="This text matches A4 model";
        textGrey.innerHTML="kjhkjh we ewf kjikjkj we";
        textGrey2.innerHTML="hf efjkj efe  edeeeeejm dff";
        return false;
    }

    else if (dropd.value == "images/2.jpg"){
        model.innerHTML = "A6";
        heading.innerHTML ="This text matches A6 model"; 
        textGrey.innerHTML ="xxx xxxxx xxxxx xxxx";
        textGrey2.innerHTML="yy yyyy yyyy yy";
        return false;
    }

    else if (dropd.value =="images/3.jpg"){
        model.innerHTML = "A8";
        heading.innerHTML ="This text matches the A8 model"; 
        textGrey.innerHTML ="zzzz zzzzz";
        textGrey2.innerHTML="pppp ppp pp p p";
        return false;
    }
}

HTML - div更改文字和图片

 <div id="carbox">
   <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

    <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p> 
    </div>  
    </div>
    <!--End carbox-->

下拉

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg">A4</option>
<option value="images/2.jpg" selected="selected">A6</option>
<option value="images/3.jpg">A8</option>
</select>

enter image description here

Answer 1

您可以使用HTML5 data attribute为任何元素分配多个值。

使用数据属性分配＆＃34;标题，描述，图片网址＆＃34;每个选择选项（在您的情况下）并从onChange访问dropdown javascript列出的<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" > <option value="images/1.jpg" data-model="A4" data-heading="Model A4 heading" data-description="Model A4 description">A4</option> <option value="images/2.jpg" data-model="A6" data-heading="Model A6 heading" data-description="Model A6 description" selected="selected">A6</option> <option value="images/3.jpg" data-model="A8" data-heading="Model A8 heading" data-description="Model A8 description">A8</option> </select>事件。

<强> HTML

<script>
    function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;   

    //getting selected option
    var option= dropd.options[dropd.selectedIndex];
    //getting dataset of option (defined with data attributes)
    var data=option.dataset;

    //accessing data attribute values
    console.log(data.model);
    console.log(data.heading);
    console.log(data.description);


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");

    model.innedHTML=data.model;
    heading.innedHTML=data.heading;
    textGrey.innedHTML=data.description;

}
</script>

<强>的Javascript

{{1}}

演示jsFiddle

参考：

Answer 2

在你的

中

 <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<img> INSIDE <h2>。因此，当您更改<h2>：

的innerHTML时

var model = document.getElementById("model");
model.innerHTML = "A4";

您丢失了<img>。

修复：提前<h2>结束：

<h2 id="model" class="model">A6</h2>
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />

Working Example

Answer 3

尝试使用FireBug调试代码。使用Chrome或Mozilla按F12 - 这将显示火警窗口，您可以调试代码。

Javascript - 在select上更改图像和文本

3 个答案: