Я изменяю видимость в соответствии с выбранным значением из «выберите». Я хочу добавить кнопку, чтобы выбрать конкретное значение из выбора, но это не работает со мной. Когда я нажимаю на кнопку, она выбирает значение и возвращается к исходному значению, прежде чем нажать кнопку. Это мой код

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Get Food</title>
<script type="text/javascript">
function nearMe()
{
document.getElementById("list").value = "1"
}

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

}
</script>
</head>
<body>
<div><img style="float: left; width: 88px; height: 88px;"
alt="Neqsat Khair Logo" src="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>
-4
Ayad 8 Дек 2016 в 14:32

3 ответа

Лучший ответ

Когда вы устанавливаете значение в раскрывающемся списке программным способом, вам необходимо вызвать функцию onchange программным способом.

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

Добавить строку document.getElementById ("список"). onchange (); в твоей ближайшей функции. Я надеюсь, что ответил на ваш вопрос.

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="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>
0
vijay 8 Дек 2016 в 12:43

Не нужно писать слишком много кода, что можно сделать простым способом.

function nearMe()
{
  alert("You set the value as 'City1'");
  document.getElementById("list").value = "1";
  document.getElementById("selected_city").innerHTML = 1;
}

function showDiv(value){
  document.getElementById("selected_city").innerHTML = value;
}
<select id="list" name="area" style="width: 200px;"
onchange="showDiv(this.value)">
<option value="">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/>
<button type="button" onclick="nearMe()">Near me</button>
<div id="selected_city"></div>
0
Rishi Raut 8 Дек 2016 в 11:49

Просто добавьте nearMe() внутри функции function showDiv(value){}, вы получите вот так

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Get Food</title>
<script type="text/javascript">
function nearMe()
{
document.getElementById("list").value = "1"
}

function showDiv(value){
nearMe()
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;
}

}
</script>
</head>
<body>
<div><img style="float: left; width: 88px; height: 88px;"
alt="Neqsat Khair Logo" src="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>
0
prasanth 8 Дек 2016 в 11:41