的代码：

Question

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

我已经为jQuery编写了HTML代码和函数，但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 (){
        $("#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：

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

.hideOnLoad {
  display: none;
}

＆＃13;

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

＆＃13;

您应该使用css隐藏textarea。然后使用onchange处理程序将操作绑定到选择框的change事件。如果选择框更改，则显示带有类.hideOnLoad.

的textarea

Answer 3

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

afterEach: function (browser, done) {
      if (browser.currentTest.results.failed) {
        browser.session(function (session) {
          browser.browserStackSessionId = session.sessionId
        }
      );
   request({
      uri: "https://" + user + ":" + key + 
      "@api.browserstack.com/automate/sessions/" + browser.browserStackSessionId 
      + ".json", 

      method:"PUT", 
      form:{"status":"failed","reason":"Assertion failure"}
      })
   } else {
        done()
      }
  },

  'Google\'s Search Functionality_Fail' : function (browser) {
    browser
      .url('https://www.google.com/ncr')
      .waitForElementVisible('body', 1000)
      .verify.title('BrowserStack@')
      .setValue('input[type=text]', 'BrowserStack\n')
      .pause(1000)
       .end(); 
  }

使用jquery显示基于所选选项的文本框

的代码：

3 个答案: