【发布时间】：2018-07-02 00:14:50
【问题描述】：
我有一个包含下拉列表和文本区域的 html 表单。我需要的是当用户从下拉列表中选择一个选项时显示文本区域。
我已经为 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>
【问题讨论】：
标签： jquery html ajax drop-down-menu textarea