Question

我有以下代码 -

$( document ).ready($(function() {
	$("#app_type").on("change",function() {
	   var selectedTestType = $(this).find("option").filter(":selected").text();
	   $(".hideable").hide();
	   if(selectedTestType=="App-1")
	   {
			$("#show_element").show();
	}).change();
}));

#show_element {
		display: none;
	}

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <div class="login-panel panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Form Title</h3>
                </div>
                <div class="panel-body">
                    <form role="form" method="post" action="form_verify.php">
                        <fieldset>
                            <div class="form-group">
								<label>Form Element</label></br>
                                <select id="app_type" class="form-control" name="form_element">
									<option selected disabled>-- Select Application Type --</option>
									<option>App-1</option>
									<option>App-2</option>
								</select>
                            </div>
<div class="form-group hideable" id="show_element">
								<label>Steps</label></br>
                                <textarea class="form-control" placeholder="Steps" name="form_steps" type="text" value="" rows="2"></textarea>
                            </div>

textarea最初是隐藏的，但是在下拉列表中选择App-1时应该显示。使用提供的代码，textarea隐藏但在选择App-1时不显示。请告知代码中的错误。

Answer 1

你有一些问题：

在代码段中缺少jQuery
缺少#app_type作为选择元素的ID
不正确的JavaScript语法

试试这个：

$(document).ready(function() {
    $("#app_type").on("change", function() {
        var selectedTestType = $(this).find("option").filter(":selected").text();
        $(".hideable").hide();
        if (selectedTestType == "App-1") {
          $("#show_element").show();
        }
    });
});

#show_element {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <div class="login-panel panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Form Title</h3>
        </div>
        <div class="panel-body">
          <form role="form" method="post" action="form_verify.php">
            <fieldset>
              <div class="form-group" id="form_id">
                <label>Form Element</label></br>
                <select id="app_type" class="form-control" name="form_element">
									<option selected disabled>-- Select Application Type --</option>
									<option>App-1</option>
									<option>App-2</option>
								</select>
              </div>
              <div class="form-group hideable" id="show_element">
                <label>Steps</label></br>
                <textarea class="form-control" placeholder="Steps" name="form_steps" type="text" value="" rows="2"></textarea>
              </div>

JQuery .show（）不适用于textarea

1 个答案: