麻烦在javascript / html select选项中使用onchange函数显示隐藏的div
[英]trouble showing hidden div with onchange function in javascript/html select option
问题描述
I am having trouble showing and hiding a div in html/javascript. 
我无法在html / javascript中显示和隐藏div。
<html>
<body>
<form name="saleproperty" action="" method="POST" onsubmit="return CommonFunction(this);">
<select id='rentsalelease'>
<option value="RENT">RENT</option>
<option value="SALE">SALE</option>
<option value="LEASE">LEASE</option>
</select>
<div style='display:none;' id='salevalue'>Sale Value<br/>
<input type='text' name='business' size='20' />
</div>
</form>
</body>
</html>
script 脚本
$(document).ready(function() {
$('#rentsalelease').on('change', function() {
if (this.value == 'SALE') {
$("#salevalue").show();
} else {
$("#salevalue").hide();
}
});
});
I want to show the div after selecting the option with the value of "SALE". 我想选择值为“ SALE”的选项后显示div。 The hidden div is not showing when changing option value of the select to "SALE". 将选择的选项值更改为“ SALE”时，不显示隐藏的div。
2 个解决方案
解决方案1
0 已采纳 2016-06-07 12:00:04
i just added ajax library url to your code
<html>
<body>
<form name="saleproperty" action="" method="POST"
onsubmit="return CommonFunction(this);" >
<select id='rentsalelease'>
<option value="RENT">RENT</option>
<option value="SALE">SALE</option>
<option value="LEASE">LEASE</option>
</select>
<div style='display:none;' id='salevalue'>Sale Value<br/>
<input type='text' name='business' size='20' />
</div>
</form>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#rentsalelease').on('change', function() {
if ( this.value == 'SALE')
//.....................^.......
{
$("#salevalue").show();
}
else
{
$("#salevalue").hide();
}
});
});
</script>
解决方案2
0 2016-06-07 12:10:27
I don't know why your code didn't work but you can achieve the same result using change function like this : 我不知道为什么您的代码无法正常工作，但是您可以使用如下change函数来达到相同的结果：
$(document).ready(function() {
$('#rentsalelease').change(function() {
if (this.value == 'SALE') {
$("#salevalue").show();
} else {
$("#salevalue").hide();
}
});
});
Here is the Jsfiddle 这是Jsfiddle
Hope it helps :) 希望能帮助到你 ：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.