3

I'm trying to get one select tag to populate based on the value of another select tag. The values for the populated select tag come from a JSON document.

The practical use here is for departing ferry terminals and what terminals they can reach.

Here is the code snippet I'm using

$(function(){
  $("select#departingfrom").change(function(){
    $.getJSON("/database.json", $(this).val(), function(ferries){
      var options = '';
      for (var key in ferries) {
        options += '<option value=' + key + '>' + key + '</option>';
      }
      $("select#arrivingto").html(options);
    });
  });
});

Here's a small example of the JSON document

var ferries = {
  "horseshoebay": {
    "departurebay": {},
    "langdale": {}
  },
  "departurebay": {
    "horeshoebay": {}
  },
  "tsawwassen": {
    "swartzbay": {},
    "dukepoint": {}
  },
  "swartzbay": {
    "tsawwassen": {},
    "fulfordharbour": {}
  },
  "dukepoint": {
    "tsawwassen": {}
  },
  "langdale": {
    "horeshoebay": {}
  },
  "fulfordharbour": {
    "swartzbay": {}
  }
},

And then the HTML

<select id="departingfrom">
  <option selected="selected"></option>
  <option value="tsawwassen">Tsawwassen (Vancouver)</option>
  <option value="swartzbay">Swartz Bay (Victoria)</option>
  <option value="dukepoint">Duke Point (Nanaimo)</option>
  <option value="departurebay">Departure Bay (Nanaimo)</option>
  <option value="horseshoebay">Horseshoe Bay (North Vancouver)</option>
  <option value="langdale">Langdale (Sunshine Coast)</option>
  <option value="fulfordharbour">Fulford Harbour (Salt Spring Island)</option>
</select>

<select id="arrivingto">
  <option selected="selected"></option>
</select>

I can't seem for the life of me to get the "function(ferries)" to run, so it makes me think that the .val is not working correctly. Let me know if you guys have any suggestions!

4

2 に答える 2

0

ajax リクエストが実際に返された場合、JSON オブジェクトが実際には適切に形成されていないことが問題のようです。

var ferries = { ... }

あなたのJSONオブジェクトは単に

{ ... }

サーバーからの応答に変数が割り当てられていません。

于 2012-10-19T01:28:59.443 に答える
0

反復JSONを容易にするために、ドキュメントを少しリファクタリングする必要があります。

たとえば、このクラスを見てみましょう。

public class City
{
    public int CityID { get; set; }
    public string Name { get; set; }
    public int StateID { get; set; }
}

そして、(ASP.NET MVC と C# を使用して) 次のようにしてJSON を返しているとします。

    // the theStateID will be for California in this example
    public JsonResult FilterCitiesByStateID(int theStateID)
    {
        List<City> citiesList = null;

        citiesList = new CustomDb().Cities.Where(x => x.StateID == 
                                                    stateID).ToList();

        return Json(citiesList, JsonRequestBehavior.AllowGet);
    }

これにより、カリフォルニアの City オブジェクトのリストが返されます。( CityID が意味のあるふりをします。)

ここに画像の説明を入力

したがって、適切な値とテキストを使用して選択リストに追加する必要があります。

var $request = $.get('/Controller/Action/', { theStateID: 1 });

$request.success(function (listOfOptions) {
    // Iterate over the cities returned and append them to the
    // select list you need
    $.each(listOfOptions, function (key, obj) {
        $('select#YourSelect')
            .append($("<option></option>")
                         .attr("value", obj.CityID) // The value will be the CityID
                         .text(obj.Name) // The text will be the City's Name
                     );
     });
});
于 2012-10-18T22:02:06.993 に答える