javascript之如何根据选择值显示表单输入字段
我知道这很简单,我需要在 Google 中搜索。我尽力而为,但找不到更好的解决方案。我有一个表单字段,它需要一些输入和一个选择字段,它有一些值。它还具有“其他”值。
我想要的是:
如果用户选择“其他”选项,则应显示一个文本字段以指定“其他”。当用户选择另一个选项(而不是“其他”)时,我想再次隐藏它。我如何使用 JQuery 执行该操作?
这是我的 JSP 代码
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
现在我只想在用户选择其他时显示 DIV 标记**(id="otherType")**。 我想试试 JQuery。这是我试过的代码
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
但是我无法得到这个。我应该怎么办?谢谢
请您参考如下方法:
您的代码存在一些问题:
- 您在选择元素的 ID 上缺少一个左引号,因此:
<select name="dbType" id=dbType">
应该是<select name="dbType" id="dbType">
$('this')
应该是$(this)
: 括号内不需要引号。当您想要检索选项的值时,请使用 .val() 而不是 .value()
当你初始化“selection”时,在它前面加上一个 var,除非你已经在函数的开头完成了它
试试这个:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
UPDATE 用于开关:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
更新,包含 jQuery 和 jQuery-UI 的链接:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。