使用 jquery 根据所选选项显示文本框

Question

我有一个包含下拉列表和文本区域的 html 表单。我需要的是当用户从下拉列表中选择一个选项时显示文本区域。

我已经为 jQuery 编写了 HTML 代码和函数，但是文本区域根本不显示。

我的代码哪里出错了？我将不胜感激任何帮助。

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <!-- Latest compiled and minified BootStarp CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
    $(function (){
        $("#droplistID").change(function(){
        $("#textarea").hide();
        $("#" + $(this).val()).show();
    });
    </script>

  </head>
  <body>
    <div id="page-wrapper" >
      <div class="container" >
        <h1>
          Send Post Data to AJAX
        </h1>
        <form name="myForm" class="form-horizontal" id ="myform" action="#" 
                onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam">
          <div class="panel panel-info">
            <div class="panel-heading">Form</div>
            <div class="panel-body">
              <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="name" class="col-md-4">Date *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" id="name" name="name"
                                placeholder="Enter Name" required/>
                      </div>
                    </div>
                    <div class="form-group" >
                      <label for="Title" class="col-md-4">Title *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control"  id="mobile" name="phone"
                                 placeholder="Enter the Title" required/>
                      </div>
                    </div>
                    <div class="form-group  ">
                      <label for="category" class="col-md-4">select Category *</label>
                      <div class="col-md-6">
                       <select name = "droplist" id="droplistID" onChange="popupTextBox()">
                           <option id = "option1" value="select" selected>Select</option>
                           <option id = "option2" value="category 1">category 1</option>
                           <option id = "option3" value="category 2">category 2</option>
                           <option id = "option4" value="category 3">category 3</option>
                       </select>
                      </div>
                    </div>

                    <div id = "textarea">
                      <div class="form-group  ">
                         <label for ="text" class="col-md-4" >Enter a text </label>
                        <div class="col-md-6">
                           <textarea cols= "60" rows= "30"> </textarea>
                        </div>
                      </div>                      
                    </div>

                    <div class="form-group  ">
                      <label for="image" class="col-md-4">Select Image </label>
                      <div class="col-md-6">
                        <input type="file" class="form-control" name="image" >
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
            <center>
              <input type="submit" class="btn btn-primary" value="Submit" />
            </center>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

Answer 1

据我了解，您希望在从下拉列表中选择某个值时出现 textarea：

<!DOCTYPE html>
<html>

<head>
  <title>Form Validation</title>
  <!-- Latest compiled and minified BootStarp CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $("#textarea").hide()
      $("#droplistID").change(function() {
        $(this).val() == 'select' ? $("#textarea").hide() : $("#textarea").show();
      });
    });
  </script>

</head>

<body>
  <div id="page-wrapper">
    <div class="container">
      <h1>
        Send Post Data to AJAX
      </h1>
      <form name="myForm" class="form-horizontal" id="myform" action="#" onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam">
        <div class="panel panel-info">
          <div class="panel-heading">Form</div>
          <div class="panel-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="name" class="col-md-4">Date *</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="Title" class="col-md-4">Title *</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control" id="mobile" name="phone" placeholder="Enter the Title" required/>
                  </div>
                </div>
                <div class="form-group  ">
                  <label for="category" class="col-md-4">select Category *</label>
                  <div class="col-md-6">
                    <select name="droplist" id="droplistID">
                           <option id = "option1" value="select" selected>Select</option>
                           <option id = "option2" value="category 1">category 1</option>
                           <option id = "option3" value="category 2">category 2</option>
                           <option id = "option4" value="category 3">category 3</option>
                       </select>
                  </div>
                </div>

                <div id="textarea">
                  <div class="form-group  ">
                    <label for="text" class="col-md-4">Enter a text </label>
                    <div class="col-md-6">
                      <textarea cols="60" rows="30"> </textarea>
                    </div>
                  </div>
                </div>

                <div class="form-group  ">
                  <label for="image" class="col-md-4">Select Image </label>
                  <div class="col-md-6">
                    <input type="file" class="form-control" name="image">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
          <center>
            <input type="submit" class="btn btn-primary" value="Submit" />
          </center>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Answer 2

$(function() {
    $("#droplistID").change(function(){
        $(".hideOnLoad").show();       
    });
});

.hideOnLoad {
  display: none;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <!-- Latest compiled and minified BootStarp CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="page-wrapper" >
      <div class="container" >
        <h1>
          Send Post Data to AJAX
        </h1>
        <form name="myForm" class="form-horizontal" id ="myform" action="#" 
                onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam">
          <div class="panel panel-info">
            <div class="panel-heading">Form</div>
            <div class="panel-body">
              <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="name" class="col-md-4">Date *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" id="name" name="name"
                                placeholder="Enter Name" required/>
                      </div>
                    </div>
                    <div class="form-group" >
                      <label for="Title" class="col-md-4">Title *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control"  id="mobile" name="phone"
                                 placeholder="Enter the Title" required/>
                      </div>
                    </div>
                    <div class="form-group  ">
                      <label for="category" class="col-md-4">select Category *</label>
                      <div class="col-md-6">
                       <select name = "droplist" id="droplistID">
                           <option id = "option1" value="select" selected>Select</option>
                           <option id = "option2" value="category 1">category 1</option>
                           <option id = "option3" value="category 2">category 2</option>
                           <option id = "option4" value="category 3">category 3</option>
                       </select>
                      </div>
                    </div>

                    <div id = "textarea">
                      <div class="form-group  ">
                         <label for ="text" class="col-md-4" >Enter a text </label>
                        <div class="col-md-6">
                           <textarea class='hideOnLoad' cols= "60" rows= "30"> </textarea>
                        </div>
                      </div>                      
                    </div>

                    <div class="form-group  ">
                      <label for="image" class="col-md-4">Select Image </label>
                      <div class="col-md-6">
                        <input type="file" class="form-control" name="image" >
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
            <center>
              <input type="submit" class="btn btn-primary" value="Submit" />
            </center>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

您应该使用 css 隐藏文本区域。然后使用 onchange 处理程序将操作绑定到 select 框的更改事件。如果 select 框发生变化，则显示带有 class .hideOnLoad.

的文本区域

Answer 3

您可以像这样更新您的 jQuery 函数并使其正常工作：

$(function() {
    $("#droplistID").change(function(event){
        if(event.target.value !== 'select'){
            $(".hideOnLoad").show();  //show if option 'select' is not selected
        } else{
            $(".hideOnLoad").hide();  //hide if option 'select' is selected
        }
    });
});

使用 jquery 根据所选选项显示文本框

show a textbox based on the selected option using jquery

html

ajax

jquery

textarea

drop-down-menu

代码：