複数のドロップダウンリスト

Question

私のAjax.BeginFormには、ユーザーがそのリストからアイテムを選択したときに部分的な表示をロードできるドロップダウンリストがあります。 これはうまくいきますが、私は次のようにしたいと思います： ユーザーがオプション番号3を選択すると、別のドロップダウンリストが表示されます

これは可能ですか？ここで

は私のコードは私が提出したときただし、両方SelectedOptionId , SelectedCatIdが に任意のアイデアをnullに設定されている以下の

<div class="col-md-2"> 
     @Html.DropDownListFor(x => x.SelectedOptionId, Model.ReportOption, new { @class = "form-control input-sm" }) 
    </div> 
     <div class="col-md-1"> 

      @Html.DropDownListFor(model => model.SelectedCatId, Model.LotOptions, new { @class = "hidden form-control input-sm" }) 

     </div> 

     <div class="col-md-2"> 
      @using (Ajax.BeginForm("Report", "Home", new { }, new AjaxOptions 
      { 
       InsertionMode = InsertionMode.Replace, 
       OnBegin = "AjaxBegin", 
       OnComplete = "AjaxComplete", 
       OnSuccess = "LoadSuccess", 
       OnFailure = "LoadFailure", 
       UpdateTargetId = "result", 

      }, new { @class = "form-horizontal form-small" } 
       )) 
      { 
       @Html.AntiForgeryToken() 
       @Html.HiddenFor(model => model.IdReport) 

       <input id="subButon" class="btn btn-primary btn-sm" type="submit" value="Submit" /> 
      } 

     </div> 

<script type="text/javascript"> 

     $(document).ready(function() { 
      $("#SelectedOptionId").change(function() { 
       var value = $("#SelectedOptionId").val(); 
       if (value == "3") { 
        $("#SelectedCatId").removeClass('hidden'); 
       } else { 
        $("#SelectedCatId").addClass('hidden'); 
       } 

      }); 
     }); 

にコードを変更し、あなたのアドバイスに従い

@using (Ajax.BeginForm("Report", "Home", new { }, new AjaxOptions 
    { 
     InsertionMode = InsertionMode.Replace, 
     OnBegin = "AjaxBegin", 
     OnComplete = "AjaxComplete", 
     OnSuccess = "LoadSuccess", 
     OnFailure = "LoadFailure", 
     UpdateTargetId = "result", 

    }, new { @class = "form-horizontal form-small" } 
     )) 
    { 
     @Html.AntiForgeryToken() 
     @Html.HiddenFor(model => model.ReportId) 

     <div class="col-md-9"> 
      @Html.DropDownListFor(x => x.SelectedOptionId, Model.ReportOption, new { onchange = "$(this.form).submit();", @class = "form-control input-sm" }) 
     </div> 
    <div id="cat" class="col-md-9"> 
      @Html.DropDownListFor(x => x.SelectedOptionId, Model.CatOption, new { onchange = "$(this.form).submit();", @class = "form-control input-sm" }) 
     </div> 

    } 

UPDATE です？