title: show and hide based on drop down list asp mvc 5
body: <p>I am learning asp.net mvc 5.</p>
  
  <p>My <code>dropdownlistfor</code> is working perfect and shows right field based on its value.
  But the problem is when the page loaded first time it shows all field..</p>
  
  <p><strong>Problem is: I want default is showing nothing when the page first time loaded.</strong></p>
  
  <p>my cshtml:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
                      &lt;div class="col-md-10"&gt;
                          @Html.DropDownListFor(m =&gt; m.PaymentMethod, ViewBag.PayTypeList as List&lt;SelectListItem&gt;, new { @class = "btn btn-primary btn-lg dropdown-toggle", @id = "PaymentId" })
                          &lt;div id="PaypalButton"&gt;
                              &lt;br/&gt;
                              &lt;script src="https://www.paypalobjects.com/api/button.js?"
                                      data-merchant="braintree"
                                      data-id="paypal-button"
                                      data-button="checkout"
                                      data-color="gold"
                                      data-size="medium"
                                      data-shape="pill"
                                      data-button_disabled="true"&gt;
                              &lt;/script&gt;
                              &lt;!--data-button_type="paypal_submit"--&gt;
                          &lt;/div&gt;
                          &lt;div id="EcheckForm"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-md-10"&gt;
                                      @Html.TextBoxFor(m =&gt; m.VecInsNum, new { @class = "form-control input-lg", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18 })
                                      @Html.ValidationMessageFor(m =&gt; m.VecInsNum, null, new { @class = "text-danger" })
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>And Js:</p>
  
  <pre><code>@section Scripts {
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#PaymentId').change(function () {
              var value = $(this).val();
              if (value == '1') {
                  $('#PaypalButton').show();
                  $('#EcheckForm').hide();
              } else if (value == '2') {
                  $('#PaypalButton').hide();
                  $('#EcheckForm').show();
              } else {
                  $('#PaypalButton').hide();
                  $('#EcheckForm').hide();
              }
          });
      });
  </code></pre>
  
  <p><strong>When the page first time loaded:</strong>
  <a href="https://i.stack.imgur.com/bX1f0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bX1f0.png" alt="enter image description here"></a></p>
  
  <p><strong>When I select Paypal:</strong>
  <a href="https://i.stack.imgur.com/cileS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cileS.png" alt="enter image description here"></a></p>
  
  <p><strong>when I select E-check:</strong>
  <a href="https://i.stack.imgur.com/ZFX5a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZFX5a.png" alt="enter image description here"></a></p>
  
  <p><strong>When I go back to Default:</strong>
  <a href="https://i.stack.imgur.com/0hEk9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hEk9.png" alt="enter image description here"></a></p>