title: how to show and hide the textarea based on the selected option from dropdownlist using jquery
body: <p>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 .</p>
  
  <h1>Jquery code:</h1>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          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();
                }
  
            });
          });
        &lt;/script&gt;
  </code></pre>
  
  <h1>HTML code:</h1>
  
  <pre><code>&lt;div class="form-group  "&gt;
                        &lt;label for="category" class="col-md-4"&gt;select Category *&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;select name="droplist" id="droplistID"&gt;
                                 &lt;option  value="select"  selected&gt;Select&lt;/option&gt;
                                 &lt;option  value="category 1"&gt;category 34&lt;/option&gt;
                                 &lt;option  value="category 2"&gt;category 2&lt;/option&gt;
                                 &lt;option  value="category 3"&gt;category 3&lt;/option&gt;
                             &lt;/select&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
      &lt;div id="textarea"&gt;
                            &lt;div class="form-group  "&gt;
                              &lt;div class="col-md-6"&gt;
                                &lt;textarea id ="textareaID34" name="textareaName34" cols="60" rows="15" placeholder="enter a text 34 "&gt; &lt;/textarea&gt;
                                &lt;textarea id ="textareaID2" name="textareaName2" cols="60" rows="15" placeholder="enter a text 2 "&gt; &lt;/textarea&gt;
                                &lt;textarea id ="textareaID3" name="textareaName3" cols="60" rows="15" placeholder="enter a text  3"&gt; &lt;/textarea&gt;                       
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>