use*_*266 27 html javascript jquery input
只有在下拉框中选择"业务使用"时,我才想让jQuery show div id ='business'.
这是我的代码:
<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/
Pra*_*lan 49
将代码包装在$(document).ready(function(){...........});处理程序中,同时删除;afterif
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value == '1')
//.....................^.......
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
您需要将代码放在页面的末尾或将其包装在文档就绪调用中,否则您将尝试在尚不存在的元素上执行代码.此外,您可以将代码减少到:
$('#purpose').on('change', function () {
$("#business").css('display', (this.value == '1') ? 'block' : 'none');
});
您的代码中有错误。unexpected token使用：
$('#purpose').on('change', function () {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
更新：您可以使用缩小代码范围.toggle()
$('#purpose').on('change', function () {
$("#business").toggle(this.value == '1');
});
核心问题是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();
}
});
// }); remove
http://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();
}
});