Ryan Ryan - 12 days ago 5
HTML Question

Output text changes based on two drop down menus

So basically I am trying to make a page where the user can select options from two drop down menus, when the second drop down menu has been completed and both have options in them I want it to trigger some javascript that takes those values and then returns text depending on the output.

E.g. a user selects xbox and comfort trade, the price is returned as £5, or maybe they select playstation and comfort trade, the price is returned as £2.50, or maybe they want pc and player auction the price is only £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";
}


}

I'm quite new to Javascript but I had a go at doing this, I also have spent the past hour or so trying to search for tutorials on this but nothing got it to work.

Answer

Try with this javascript function:

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";
    }
}
Comments