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

Question

i have a jquery code that is used in order to show or hide specified textarea based on the user selection form the dropdownlist where each option will show the related textarea to it .

Jquery code:

 <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 code:

<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

Is this what you want?

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>

A smart way of doing it is this:

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

But then you have to change each option value a bit.

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>