使用 jquery 显示基于所选选项的文本框
Posted
技术标签:
【中文标题】使用 jquery 显示基于所选选项的文本框【英文标题】：show a textbox based on the selected option using jquery 【发布时间】：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>
【问题讨论】：
【参考方案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>【讨论】：
我试过你的答案它不起作用我正在使用 wordpress 这与 WordPress 无关。代码中的问题看起来像一个独立的页面和一个 JQuery 代码。 是的，它是一个独立的页面，但我使用 wordpress 作为平台 好的。 ?所以.. ？你检查控制台是否有错误？ 它不起作用是模糊的，不能指出什么不起作用以及哪里/什么是错误？【参考方案2】：你可以像这样更新你的 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
);
);
【讨论】：
【参考方案3】：$(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 处理程序将操作绑定到选择框的更改事件。如果选择框发生变化，您将显示类为 .hideOnLoad. 的 textarea
【讨论】：
在此处发布您的代码（最好是作为堆栈片段），而不仅仅是在远程站点。 它不仅仅是一个远程站点。这是 OP 询问的实际代码，但经过调整以解决问题？您能否详细说明为什么发布这样的链接不正确？现在已经这样做了一段时间...... Is a link to jsfiddle with an explanation a valid answer 感谢您的解释！猜猜我今天学到了一些东西:)。我已经更新了我的答案。以上是关于使用 jquery 显示基于所选选项的文本框的主要内容，如果未能解决你的问题，请参考以下文章