我想根据下拉框选择显示/隐藏div
我想根据下拉框选择显示/隐藏div
提问于 2014-02-06 01:54:40
我希望只有在下拉框中选择了‘业务用途’时，jQuery才会显示div id=‘业务’。
这是我的代码：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#purpose').on('change', function() {
if ( this.value == '1');
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
</body>和JSFiddle：http://jsfiddle.net/2kGzZ/1/
回答 4
Stack Overflow用户
发布于 2014-02-06 02:05:37
核心问题是js错误：
$('#purpose').on('change', function () {
// if (this.value == '1'); { No semicolon and I used === instead of ==
if (this.value === '1'){
$("#business").show();
} else {
$("#business").hide();
}
});
// }); removehttp://jsfiddle.net/Bushwazi/2kGzZ/3/
我不得不清理html &js...我情不自禁。
HTML：
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<form id="business">
<label for="business">Business Name</label>
<input type='text' class='text' name='business' value size='20' />
</form>CSS：
#business {
display:none;
}JS：
$('#purpose').on('change', function () {
if(this.value === "1"){
$("#business").show();
} else {
$("#business").hide();
}
});Stack Overflow用户
发布于 2015-06-11 12:30:31
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value == '1')
//.....................^.......
{
$("#business_new").hide();
$("#business").show();
}
else if ( this.value == '2')
{
$("#business").hide();
$("#business_new").show();
}
else
{
$("#business").hide();
}
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
<div style='display:none;' id='business_new'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value="1254" size='20' />
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
</body>Stack Overflow用户
发布于 2017-07-05 20:39:01
试试这个，在我的测试演示中对我很有效
<script>
$(document).ready(function(){
$('#dropdown').change(function()
{
// var selectedValue = parseInt(jQuery(this).val());
var text = $('#dropdown').val();
//alert("text");
//Depend on Value i.e. 0 or 1 respective function gets called.
switch(text){
case 'Reporting':
// alert("hello1");
$("#td1").hide();
break;
case 'Buyer':
//alert("hello");
$("#td1").show();
break;
//etc...
default:
alert("catch default");
break;
}
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21584752
复制相关文章
相似问题