[Solved] Change “select” item according to button click HTML JS

by


When you are setting a value to the dropdown box programatically you need to call the onchange function programatically.

function nearMe()
{
document.getElementById("list").value = "1"
document.getElementById("list").onchange();
}

add the line document.getElementById(“list”).onchange(); in your nearme function. I hope i answered your question.

function nearMe(){
document.getElementById("list").value = "1"
document.getElementById("list").onchange();
}

function showDiv(value){

switch (value) {
case '0':
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = 'none';
document.getElementById('4').style.display = 'none';
break
case '1':
document.getElementById('1').style.display = '';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = 'none';
document.getElementById('4').style.display = 'none';
break;
case '2':
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = '';
document.getElementById('3').style.display = 'none';
document.getElementById('4').style.display = 'none';
break;
case '3':
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = '';
document.getElementById('4').style.display = 'none';
break;
case '4':
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = 'none';
document.getElementById('4').style.display = '';
break;
default :
break;
}

}
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Get Food</title>


</head>
<body>
<div><img style="float: left; width: 88px; height: 88px;"
alt="Neqsat Khair Logo" src="https://stackoverflow.com/questions/41038452/neqsatKhair.jpeg"><br>
<h1 style="text-align: center;">App name</h1>
</div>
<hr> <br>
<h3> H3 </h3>
close to: <br>
<br>
<form action="123.html">
<select id="list" name="area" style="width: 200px;"
onchange="showDiv(this.value)">
<option value="0">Choose an area</option>
<option value="1">City1</option>
<option value="2">City2</option>
<option value="3">City3</option>
<option value="4">City4</option>
</select>
<br>
<br>
<button onclick="nearMe()">Near me</button> <br>
<br>
<div id="1" style="display: none;"><br>
<p> 1 </p>
  </div>
<div id="2" style="display: none;">
<p> 2 </p>
  </div>
<div id="3" style="display: none;">
<p> 3 </p>
  <div id="4" style="display: none;">
<p> 4 </p>
  </div>
</form>
</body>
</html>

3

solved Change “select” item according to button click HTML JS