سلام

دوتا dropdownlistدارم که دراپ اول انتخاب می کنم  با توجه به انتخاب  آیتم انتخاب دراپ اول آیتمهای در دراپ دوم  نمایش داده می شود

چگونه می توانم تا زمانی که آیتمی از dropdownlist اول انتخاب نشده است دراپ دان لیست دوم مخفی کنیم

@{

    ViewBag.Title = "Index";
}

    <div style = "margin-top:10px;" >
        <table >
        <tr >
        <td> انتخاب کشور </td> <td >
@Html.DropDownList("Country", ViewBag.Country as List<SelectListItem>, "انتخاب کشور", new
        {
            @id = "ddlCountry",
            @class = "form-control"
        }) </td>

    </tr> <tr>
        <td>
            انتخاب شهر </td> <td>
@Html.DropDownList("State", new SelectList(string.Empty), "انتخاب شهر", new
        {
            @id = "ddlSate",
            @class = "form-control"
        }) </td> </tr> </table>

</div>
<script src="~/scripts/jquery-1.10.2.js"> </script>
@section Scripts
{
  <script type="text/javascript">
      $(document).ready(function () {

          $("#ddlCountry").change(function () {
              var SelectedVal = $(this).val();
              $("#ddlSate").html('');
              $("#ddlSate").append($("<option></option>").attr("value", '')
                  .text('انتخاب شهر '));
              if (SelectedVal != '') {

                  $.get('/Home/GetState/',
                  {
                      "CountryId": SelectedVal
                  }).success(function (data) {
                     
                      $.each(data, function (index, item) {
                          $("#ddlSate").append($("<option></option>").attr("value", item.StateId)
                              .text(item.StateName));
                      });

                  });
              }
          });
      })
</script>
    
}