<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
<h2>Drop selected Calculator</h2>
Enter the value :
<input id="id1" type="text"><br><br>
Enter the value :
<input id="id2" type="text"><br><br>
<select id="demo3" onchange="fun()">
<option value="add">Add</option>
<option value="sub">sub</option>
<option value="mul">Mul</option>
<option value="div">Div</option>
</select><br><br>
Your Answer Is :
<p id="an"></p>
<script>
function fun(){
var x1=document.getElementById("id1").value;
var x2=document.getElementById("id2").value;
var r=document.getElementById("demo3").value;
var ans="";
if(r=="add"){
ans=Number(x1)+Number(x2);
}
else if(r=="sub"){
ans=Number(x1)-Number(x2);
}
else if(r=="div"){
ans=Number(x1)/Number(x2);
}
else if(r=="mul"){
ans=Number(x1)*Number(x2);
}
document.getElementById("an").innerHTML=ans;
}
</script>
</body>
</html>
