如何根据选择值显示表单输入字段？

一尘不染

如何根据选择值显示表单输入字段？

jsp

我知道这很简单，我需要在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>

但是我无法做到这一点。我该怎么办？谢谢

阅读 351

2020-06-08

共1个答案

一尘不染

您的代码有一些问题：

您在select元素的ID上缺少打开的引号，因此： <select name="dbType" id=dbType">

应该 <select name="dbType" id="dbType">

$('this')应该是$(this)：不需要在括号内加上引号。
要检索选项的值时，请使用.val（）而不是.value（）
当您初始化“选择”时，请在其前面加上一个var，除非您已在函数开始时完成它

尝试这个：

   $('#dbType').on('change',function(){
        if( $(this).val()==="other"){
        $("#otherType").show()
        }
        else{
        $("#otherType").hide()
        }
    });

http://jsfiddle.net/ks6cv/

*与开关配合使用的 *UPDATE ：

$('#dbType').on('change',function(){
     var selection = $(this).val();
    switch(selection){
    case "other":
    $("#otherType").show()
   break;
    default:
    $("#otherType").hide()
    }
});

*带有jQuery和jQuery-UI链接的 *UPDATE ：

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

2020-06-08