如何使用 jquery 根据从下拉列表中选择的选项显示和隐藏文本区域

Question

我有一个 jquery 代码，用于根据用户在下拉列表中的选择显示或隐藏指定的文本区域，其中每个选项都会显示相关的文本区域。

Jquery代码：

 <script type="text/javascript">
        jQuery(function() {
          jQuery("#textarea").hide()
          jQuery("#droplistID").change(function() {
        //  jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show();
            var value = jQuery(this).val();
              if(value=="category 1" ){
                  jQuery("#option2").show();
              }
              else if (value=="category 2"){
                  jQuery("#option3").show();
              }
              else if (value=="category 3"){
                  jQuery("#option4").show();
              }

          });
        });
      </script>

HTML代码：

<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  value="select"  selected>Select</option>
                               <option  value="category 1">category 34</option>
                               <option  value="category 2">category 2</option>
                               <option  value="category 3">category 3</option>
                           </select>
                      </div>
                    </div>
    <div id="textarea">
                          <div class="form-group  ">
                            <div class="col-md-6">
                              <textarea id ="textareaID34" name="textareaName34" cols="60" rows="15" placeholder="enter a text 34 "> </textarea>
                              <textarea id ="textareaID2" name="textareaName2" cols="60" rows="15" placeholder="enter a text 2 "> </textarea>
                              <textarea id ="textareaID3" name="textareaName3" cols="60" rows="15" placeholder="enter a text  3"> </textarea>                       
                            </div>
                          </div>
                        </div>

Answer 1

这是你想要的吗？

jQuery(function() {
  jQuery("textarea").hide()
  jQuery("#droplistID").change(function() {
    //  jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show();
    var value = jQuery(this).val();
    jQuery("textarea").hide()
    if (value == "category 1") {
      jQuery("#textareaID2").show();
    } else if (value == "category 2") {
      jQuery("#textareaID3").show();
    } else if (value == "category 3") {
      jQuery("#textareaID34").show();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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  value="select"  selected>Select</option>
                               <option  value="category 1">category 34</option>
                               <option  value="category 2">category 2</option>
                               <option  value="category 3">category 3</option>
                           </select>
  </div>
</div>
<div id="textarea">
  <div class="form-group  ">
    <div class="col-md-6">
      <textarea id="textareaID34" name="textareaName34" cols="60" rows="15" placeholder="enter a text 34 "> </textarea>
      <textarea id="textareaID2" name="textareaName2" cols="60" rows="15" placeholder="enter a text 2 "> </textarea>
      <textarea id="textareaID3" name="textareaName3" cols="60" rows="15" placeholder="enter a text  3"> </textarea>
    </div>
  </div>
</div>

一个聪明的做法是：

jQuery(function() {
  jQuery("textarea").hide()
  jQuery("#droplistID").change(function() {
    var value = jQuery(this).val();
    jQuery("textarea").hide();
    jQuery("#" + value).show();
  });
});

但是你必须稍微更改每个选项值。

jQuery(function() {
  jQuery("textarea").hide()
  jQuery("#droplistID").change(function() {
    var value = jQuery(this).val();
    jQuery("textarea").hide();
    jQuery("#" + value).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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  value="select"  selected>Select</option>
                               <option  value="textareaID34">category 34</option>
                               <option  value="textareaID2">category 2</option>
                               <option  value="textareaID3">category 3</option>
                           </select>
  </div>
</div>
<div id="textarea">
  <div class="form-group  ">
    <div class="col-md-6">
      <textarea id="textareaID34" name="textareaName34" cols="60" rows="15" placeholder="enter a text 34 "> </textarea>
      <textarea id="textareaID2" name="textareaName2" cols="60" rows="15" placeholder="enter a text 2 "> </textarea>
      <textarea id="textareaID3" name="textareaName3" cols="60" rows="15" placeholder="enter a text  3"> </textarea>
    </div>
  </div>
</div>

Answer 2

只需稍作修改，以下是您想要的工作示例：

Preview on JS Fiddle

 jQuery(function() {
      jQuery("textarea").hide()
      jQuery("#droplistID").change(function() {
    //  jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show();
        var value = jQuery(this).val();
          if(value=="category 1" ){
              jQuery("textarea").hide()
              $("#textareaID34").show();
          }
          else if (value=="category 2"){
              jQuery("textarea").hide()
              jQuery("#textareaID2").show();
          }
          else if (value=="category 3"){
              jQuery("textarea").hide()
              jQuery("#textareaID3").show();
          }

      });
    });

希望对您有所帮助。

如何使用 jquery 根据从下拉列表中选择的选项显示和隐藏文本区域

how to show and hide the textarea based on the selected option from dropdownlist using jquery

html

jquery

show-hide

Jquery代码：

HTML代码：