如何根據下拉選擇值使用Javascript更改圖像？

Question

我是一個完全使用JavaScript的菜鳥，但是我設法為用戶創建了一個表格，該表格的左側有4個下拉選擇框（狀態，汽車，年份，條件）。

用戶進行下拉選擇，然后單擊下面的'calculate'按鈕，該按鈕根據其輸入運行一些簡單的功能，並在表單的右側顯示4個不同的值。

表單中間是一張名為car1.png的圖片，我想根據返回到結果3的值進行更改（即， if 0.07 show "car2.png", if 0.06 show "car3.png" 。我已經嘗試了所有可能想到的東西，並通讀了許多有關“ if”語句的教程，但感覺到自己在錯誤的地方。

考慮到我在這一領域的知識不足，我將如何盡可能簡單地做到這一點的任何想法將不勝感激。

到目前為止，這是我想出的：

 <HTML> <body> <script type="text/javascript"> function calcform() { with (document.form1) { result1.value = +number1.value * .75 * 50} { result2.value = +number2.value * 1} { result3.value = +number3.value * 1} { result4.value = +number2.value * +number1.value} } </script> </div> <div class="span17"> <table><form name="form1" action=""> <h4>State :<br/> <select name="number" id="number1"> <option value="15">SA</option> <option value="16">VIC</option> <option value="17">NSW</option> <option value="10">QLD</option> <option value="19">NT</option> <option value="14">WA</option> </select></h4><br/> <h4>Car :<br/> <select name="number" id="number4"> <option value="1">Ford</option> <option value="2">Nissan</option> <option value="3">Toyota</option> <option value="4">Holden</option> </select></h4><br/> <h4>Year :<br/> <select name="number" id="number2"> <option value="0.1">1980</option> <option value="0.2">1981</option> <option value="0.3">1982</option> <option value="0.4">1983</option> <option value="0.5">1984</option> <option value="0.6">1985</option> </select></h4><br/> <h4>Condition :<br/> <select name="number3" id="number3"> <option value="0.08">New</option> <option value="0.07">Used</option> <option value="0.06">Defect</option> <option value="0.05">Scrap</option> </select></h4><br/> <input type="button" id="Calculate" value="Calculate" onclick="calcform()" /><input type="reset" id="reset" value=" Clear "/></tr> </span> <div class="span20"> <br> <br> <img src="car1.png"> </div> <div class="span15"> <br/><tr><td><h4><strong></strong></h4><br/> <h4>Result 1:<br /> <div class="span15"> <input type="text" id="result1" value="" size="40" /></h4><br/> </div> <h4>Result 2:<br /> <input type="text" id="result2" value="" size="40" /></h4><br/> <h4>Result 3:<br /> <input type="text" id="result3" value="" size="40" /></h4><br/> <h4>Result 4:<br /> <input type="text" id="result4" value="" size="40" /></h4><br/> </form> </table> </div> </div> </div> </div> </div> </body> </html>

Answer 1

這是一個簡單的小腳本，可以幫助您說明所有這些工作原理。

小提琴： http : //jsfiddle.net/8axe4nu2/1/

代碼說明：

單擊按鈕時觸發的函數，在這種情況下，我們只是使用它來返回單擊函數的結果。在這種情況下，我只是讓它提醒您選擇了什么車，但是理想情況下，您可以使它返回圖像您想顯示給特定的div。

function carPicker(carValue){
    alert(carValue);
}

這是腳本的一部分，您應該使用click函數生成想要返回的結果-在這種情況下，我查看選項（下拉列表）並獲取所選值，您需要針對每個選項執行此操作然后返回加入的結果。

$("#carButton").on("click",function(){
    var carValue = $("#carPicker").val();
    carPicker(carValue);
});

Answer 2

要更改圖像，請在JS中執行以下操作：

function calcform() 
{ 
with (document.form1) 

{ result1.value = +number1.value * .75 * 50}
{ result2.value = +number2.value * 1}
{ result3.value = +number3.value * 1}
{ result4.value = +number2.value * +number1.value}
if(result1.value > 0)
    document.getElementById("myImage").src = "image_name1";
if(result2.value == 1)
    document.getElementById("myImage").src = "image_name2";
}

注意：此“ if()語句應包含要更改為每張圖片的條件。” 另外，將“ image_name1 ”和“ image_name2 ”更改為每種情況下所需的其他圖像的位置。 您還可以包括更多條件。

注意2： with語句在JS中很好用。 它指示對於以下每個塊{}，您將使用前綴“ document.form1”，即：

document.form1.result1.value =  ...
document.form1.result2.value = ...
document.form1.result3.value = ...
document.form1.result4.value = ...

將此ID放入標簽img中：

<img id="myImage" src="car1.png">

如何根據下拉選擇值使用Javascript更改圖像？

問題描述

2 個解決方案

解決方案1
0 2014-10-21 13:41:40

解決方案2
0 已采納 2014-10-21 14:04:31

如何根據下拉選擇值使用Javascript更改圖像？

問題描述

2 個解決方案

解決方案1 0 2014-10-21 13:41:40

解決方案2 0 已采納 2014-10-21 14:04:31

解決方案1
0 2014-10-21 13:41:40

解決方案2
0 已采納 2014-10-21 14:04:31