根据按钮单击HTML JS更改“选择”项

时间：2016-12-08 11:32:05

标签： javascript html

我正在根据“select”中的选定值更改可见性。 我想添加一个按钮来从select中选择一个特定的值，但它不适用于我。 单击按钮时，选择该值并返回原始值，然后单击按钮。 这是我的代码

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

3 个答案:

答案 0 :(得分：0)

只需在nearMe()函数中添加function showDiv(value){}即可。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

无需编写太多可以通过简单方式完成的代码。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

当您以编程方式将值设置到下拉框时，您需要以编程方式调用onchange函数。

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

添加行document.getElementById（“list”）。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>

相关问题
最新问题