カスケードドロップダウンで空白値が必要MVC5

Question

うまくいけば簡単に答えられます。下のコードを使用してカスケードドロップダウンを作成していますが、国を選択すると、州は自動的に州表の最初の値（適切な国）を入力します。私はどこかに空の文字列を追加する必要があると思うが、私はどこか分からない。

おかげ

h2>Cascading DropDownList Sample</h2> 



<div> 

    <div> 

     @Html.DropDownList("dropdownCountry", new SelectList(string.Empty, "Value", "Text"), "Please select a country", new { @style = "width:250px;" }) 

    </div> 

    <div style="margin-top:50px;"> 


     @Html.DropDownList("dropdownState", new SelectList(string.Empty, "Value", "Text"), "Please select a state", new { @style = "width:250px;" }) 

    </div> 

</div> 

@section scripts 
{ 

<script> 

    $(function() { 

     $.ajax({ 

      type: "GET", 

      url: "/test/getcountries", 

      datatype: "Json", 

      success: function (data) { 

       $.each(data, function (index, value) { 

        $('#dropdownCountry').append('<option value="' + value.CountryId + '">' + value.CountryName +'</option>'); 

       }); 

      } 

     }); 



     $('#dropdownCountry').change(function() { 



      $('#dropdownState').empty(); 



      $.ajax({ 

       type: "POST", 

       url: "/test/GetStatesByCountryId", 

       datatype: "Json", 

       data: { countryId: $('#dropdownCountry').val() }, 

       success: function (data) { 

        $.each(data, function (index, value) { 

         $('#dropdownState').append('<option value ="' + value.Id + '">' + value.StateName + '</option>'); 

        }); 

       } 

      }); 

     }); 

    }); 

</script> 
    } 

Answer 1

あなたの国では、変更イベントの成功成功コールバック関数では、1行の変更を行う必要があります。

$('#dropdownState').append('<option>Select State</option>'); 
$.each(data, function (index, value) { 
    $('#dropdownState').append('<option value ="' + 
     value.Id + '">' + value.StateName + '</option>'); 
}); 

あなたのオプションを変数に入れて、最終的にその値をドロップダウンに割り当てることをお勧めします。

var html = ''; 
html = '<option>Select State</option>'; 
$.each(data, function (index, value) { 
    html += '<option value ="' + 
     value.Id + '">' + value.StateName + '</option>'; 
}); 
$('#dropdownState').html(html) 

append function 5つの州を提供する国Aを選択した場合のように問題を引き起こす要素を選択するオプションを追加します。次に、10の州を提供する国Bを選択し、州の最終的な結果は国Bのための15の州のオプションになります。したがって、追加する代わりに、私はhtml関数を使用しました。

Answer 2

は、あなただけのサービスGetStatesByCountryIdによって返される要素の最初の場所でモック項目を追加することができます。 idフィールドは空白にすることができ、statenameは "Please Choose"のようにすることができます。次に、選択したアイテムIDが空白であるかどうかを確認できます。