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

时间:2013-03-22 09:37:42

标签: javascript jquery html 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>

但我无法得到这个。我该怎么办?感谢

6 个答案:

答案 0 :(得分:32)

您的代码存在一些问题:

  1. 您缺少对select元素的ID的开放引用,因此:<select name="dbType" id=dbType">
  2. 应为<select name="dbType" id="dbType">

    1. $('this')应该是$(this):在paranthesis中不需要引号。

    2. 当您想要检索选项的值时使用.val()而不是.value()

    3. 当你初始化“选择”时,用它前面的var做它,除非你已经在函数的开始处完成了它

    4. 试试这个:

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

      http://jsfiddle.net/ks6cv/

      用于开关的

      更新

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

      UPDATE ,包含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 :(得分:5)

<强> Demo on JSFiddle

$(document).ready(function () {
    toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
    // this will call our toggleFields function every time the selection value of our other field changes
    $("#dbType").change(function () {
        toggleFields();
    });

});
// this toggles the visibility of other server
function toggleFields() {
    if ($("#dbType").val() === "other")
        $("#otherServer").show();
    else
        $("#otherServer").hide();
}

HTML:

    <p>Choose type</p>
    <p>Server:
        <select id="dbType" name="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>
    </p>
    <div id="otherServer">
        <p>Server:
            <input type="text" name="server_name" />
        </p>
        <p>Port:
            <input type="text" name="port_no" />
        </p>
    </div>
    <p align="center">
        <input type="submit" value="Submit!" />
    </p>

答案 2 :(得分:2)

您必须使用val()代替value()而错误的起始引用id=dbType"应为id="dbType"

<强> Live Demo

更改

selection = $('this').value();

selection = $(this).val();

selection = this.value;

答案 3 :(得分:0)

$('#dbType').change(function(){

   var selection = $(this).val();
   if(selection == 'other')
   {
      $('#otherType').show();
   }
   else
   {
      $('#otherType').hide();
   } 

});

答案 4 :(得分:0)

我得到了答案。这是我的代码

<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="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>

我的剧本是

$(function() {

        $('#dbType').change(function() {
            $('.selectDBType').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });

答案 5 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
function myfun(){
$(document).ready(function(){

    $("#select").click(
    function(){
    var data=$("#select").val();
        $("#disp").val(data);
                     });
});
}
</script>
</head>
<body>

<p>id <input type="text" name="user" id="disp"></p>

<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>

</body>
</html>