基於兩個下拉菜單輸出文本更改

Question

所以基本上我試圖做一個頁面，用戶可以從兩個下拉菜單中選擇選項，當第二個下拉菜單已完成，並且都有選項時，我想它會觸發一些採用這些值的JavaScript，然後根據輸出返回文本。

E.g.用戶選擇Xbox和舒適交易，價格返回爲5英鎊，或者他們選擇PlayStation和舒適交易，價格返回2.50英鎊，或者他們想要電腦和玩家拍賣價格僅爲0.99英鎊。

HTML

<select id="platform" name="platform"> 
    <option select value=""></option> 
    <option value="xbox">Xbox</option> 
    <option value="playstation">PlayStation</option> 
    <option value="pc">PC</option> 
</select><br> 
<p>Select Method:</p> 
<select id="method" name="method" onChange="price()"> 
    <option selected value=""></option> 
    <option value="comfortTrade">Comfort Trade</option> 
    <option value="playerAuction">Player Auction</option> 
</select><br> 
<h3 id="price"></h3> 

的Javascript

function price() { 
    if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") { 
     document.getElementById("price").innerHTML = "£5"; 
    } else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") { 
     document.getElementById("price").innerHTML = "£2.50"; 
    } 
} 

我非常新的JavaScript，但我在做這個一去，我也花了一小時左右嘗試搜索這個教程，但沒有得到它的工作。

Answer 1

這種嘗試javascript函數：

function price() { 
    if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") { 
     document.getElementById("price").innerHTML = "£5"; 
    } else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") { 
     document.getElementById("price").innerHTML = "£2.50"; 
    } 
} 

Answer 2

有兩件事情需要在現有代碼進行更新，以得到這個工作：

1）onchange沒有大寫字母，以及需要被添加到「平臺」 <select>以及

2 ）沒有必要在這裏$，document.getElementById

3）在步驟2中選擇元素後可以直接使用，需要由元素訪問屬性.value獲得選擇的值。

固定碼：

<div id="app"> 
    <select id="platform" name="platform" onchange="price()"> 
    <option select value=""></option> 
    <option value="xbox">Xbox</option> 
    <option value="playstation">PlayStation</option> 
    <option value="pc">PC</option> 
    </select><br> 
    <p>Select Method:</p> 
    <select id="method" name="method" onchange="price()"> 
    <option selected value=""></option> 
    <option value="comfortTrade">Comfort Trade</option> 
    <option value="playerAuction">Player Auction</option> 
    </select><br> 
    <h3 id="price"></h3> 
</div> 

<script> 
    function price() { 
    if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") { 
document.getElementById("price").innerHTML = "£5"; 
    } else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") { 
document.getElementById("price").innerHTML = "£2.50"; 
    } 
    } 
</script> 

Answer 3

假設你已經安裝了jQuery的，因爲你在你的代碼中使用$(...)，可以解決你的問題是這樣的：

<select id="platform" name="platform" onchange="findPrice()"> 
     <option select value=""></option> 
     <option value="xbox">Xbox</option> 
     <option value="playstation">PlayStation</option> 
     <option value="pc">PC</option> 
    </select><br> 
    <p>Select Method:</p> 
    <select id="method" name="method" onchange="findPrice()"> 
     <option selected value=""></option> 
     <option value="comfortTrade">Comfort Trade</option> 
     <option value="playerAuction">Player Auction</option> 
    </select><br> 
    <h3 id="price"></h3> 
<script type="application/javascript"> 
window.findPrice = function() { 
    if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") { 
    document.getElementById("price").innerHTML = "£5"; 
    }else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") { 
    document.getElementById("price").innerHTML = "£2.50"; 
    } 
} 
</script> 

你可以看到一個工作示例：https://jsfiddle.net/L2vgqmtL/

---

不過，我真的提出了一個稍微不同的解決方案，我覺得更優雅：

<script type="application/javascript"> 
window.findPrice = function() { 
    var platform = $("#platform").val(); 
    var method = $("#method").val(); 
    var priceUpdateText = ""; 
    if(method == 'comfortTrade'){ 
    switch(platform){ 
     case "xbox": 
     priceUpdateText = "£5"; 
     break; 
     case "playstation": 
     priceUpdateText = "£2.50"; 
     break; 
     default: 
     priceUpdateText = ""; 
    } 
    } 
    $("#price").text(priceUpdateText); 
} 
</script> 
      <select id="platform" name="platform" onchange="findPrice()"> 
     <option select value=""></option> 
     <option value="xbox">Xbox</option> 
     <option value="playstation">PlayStation</option> 
     <option value="pc">PC</option> 
    </select><br> 
    <p>Select Method:</p> 
    <select id="method" name="method" onchange="findPrice()"> 
     <option selected value=""></option> 
     <option value="comfortTrade">Comfort Trade</option> 
     <option value="playerAuction">Player Auction</option> 
    </select><br> 
    <h3 id="price"></h3> 

這一解決方案的工作示例，請訪問：https://jsfiddle.net/8wafskbw/2/

重要提示：這兩個解決方案都是在您的頁面中包含jQuery的假設下運行的。