14

mvc を使用して、カスケード ドロップ ドラウを取得しました。たとえば、最初のドロップダウンで国を選択すると、それに応じてその国の州が 2 番目のドロップダウンに入力されます。

現時点では、すべて問題ないようで、Json 応答を取得しています (F12 ツールを使用して見ました)。 [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

second-dropdownこのデータを自分に入力する方法を知りたいです。2 番目のドロップダウンの ID は " StateID" です。どんな助けでも大歓迎です。

以下は、サーバーから JSON 応答を生成するために使用されるコードです。

[HttpPost]
public JsonResult GetStates(string CountryID)
{
    using (mdb)
    {
        var statesResults = from q in mdb.GetStates(CountryID)
                        select new Models.StatesDTO
                        {
                            StateID = q.StateID,
                            StateName = q.StateName
                        };

        locations.statesList = stateResults.ToList();
    }

    JsonResult result = new JsonResult();

    result.Data = locations.statesList;

    return result;
}

以下は、クライアント側の HTML、私のカミソリ コード、およびスクリプトです。success" :" 内にコードを記述して、州dropdownに JSON データを設定したいと考えています。

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function () { alert("Data retrieval successful"); },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>
4

8 に答える 8

18

まず、jQuery イベント ハンドラー関数内では、イベントをトリガーした要素を参照するため、追加の呼び出しをにthis置き換えることができます。ただし、可能であれば、jQuery 関数を使用するのではなく、要素のプロパティに直接アクセスする必要があるため、 orではなく単純に行うことができます。$("select#CountryID")$(this)this.value$(this).val()$("select#CountryID").val()

次に、AJAX 呼び出し関数内で、一連の要素successを作成する必要があります。<option>これは、 basejQuery()関数 (または$()略して) を使用して行うことができます。それは次のようになります。

$.ajax({
    success: function(states) {
        // states is your JSON array
        var $select = $('#StateID');
        $.each(states, function(i, state) {
            $('<option>', {
                value: state.stateId
            }).html(state.StateName).appendTo($select);
        });
    }
});

これはjsFiddle デモです。

関連する jQuery ドキュメント:

于 2013-01-15T13:56:04.563 に答える
13

私のプロジェクトでは、私はこのようにやっています

iNMYコントローラー

public JsonResult State(int countryId)
{               
    var stateList = CityRepository.GetList(countryId);
    return Json(stateList, JsonRequestBehavior.AllowGet);
}

モデル内

public IQueryable<Models.State> GetList(int CountryID)
{

    var statelist = db.States.Where(x => x.CountryID == CountryID).ToList().Select(item => new State
    {
        ID = item.ID,
        StateName = item.StateName
    }).AsQueryable();
    return statelist;
}

ビューで

<script type="text/javascript">
   function cascadingdropdown() {
       $("#stateID").empty();
       $("#stateID").append("<option value='0'>--Select State--</option>");
       var countryID = $('#countryID').val();
       var Url="@Url.Content("~/City/State")";
       $.ajax({
           url:Url,
           dataType: 'json',
           data: { countryId: countryID },
           success: function (data) {                
               $("#stateID").empty();
               $("#stateID").append("<option value='0'>--Select State--</option>");
               $.each(data, function (index, optiondata) {                  
                   $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
               });
           }
       });
   }     
</script>

私はこれがあなたを助けると思う......

于 2013-01-15T13:52:08.637 に答える
1

ajax呼び出し内でこれを試してください：

$.ajax({
  url: "/Home/GetStates",
  type: 'POST',
  data: {
    CountryID: $("select#CountryID").val()
  },
  success: function (data) {
    alert("Data retrieval successful");
    var items = "";

    $.each(data, function (i, val) {
      items += "<option value='" + val.stateId + "'>" + val.StateName + "</option>";
    });

    $("select#StateID").empty().html(items);
  },
  error: function (xhr) {
    alert("Something seems Wrong");
  }
});

編集1

success: function (data) {

  $.each(data, function (i, val) {
    $('select#StateID').append(
    $("<option></option>")
      .attr("value", val.stateId)
      .text(val.StateName));
  });
},
于 2013-01-15T13:55:47.450 に答える
0

この投稿が 1 年前のものであることは知っていますが、私が見つけたので、あなたもそうかもしれません。私は次のソリューションを使用していますが、非常にうまく機能します。Javascript を 1 行も書く必要のない強い型付け。

mvc4ajaxdropdownlist.codeplex.com

Visual Studio から NuGet パッケージとしてダウンロードできます。

于 2014-08-29T08:36:40.337 に答える