How to use if statement if you have three drop down selected values using javascript and html

Question

I have three drop down selected values as you can see below. How can I say for example if car = volvo and color = Black and name = Jone // do something or alert (cool) in JavaScript?

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>

<select>
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>

Possible duplicate of [Get selected value/text from Select on change](https://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change) — Madhawa Priyashantha, Dec 16 '17 at 03:25
Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Jay A. Little, Dec 16 '17 at 03:25
Please always search for your problem before posting a question, and for grab or access, the element adds Id or class. — Muddasir23, Aug 07 '19 at 08:20

score 2 · Accepted Answer · answered Dec 16 '17 at 03:37

It would have been very easy with angular js by two way binding and applying same valuechange listener on all the three dropdowns.

However, here also you can provide 3 different ids to your dropdowns and bind them with same value-change listener using onchange attribute.

In the value-change listener function , get the value of all the 3 drop down value by document.getElementById , comapre them and display alert accordingly. You can find below the sample solution for it which I prepared:

<head>
<script>
function dropdownChange()    {
var car=document.getElementById("car").value;
var color=document.getElementById("color").value;
var owner=document.getElementById("owner").value;
if(car==="volvo" && color==="red" && owner ==="james")    {
    alert("Cool");
}
}
</script>
</head>
<body>
<select id ="car" onchange="dropdownChange();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select id="color" onchange="dropdownChange();">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>

<select id="owner" onchange="dropdownChange();">
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
</body>

How to use if statement if you have three drop down selected values using javascript and html

1 Answers1