3

我正在尝试根据另一个选择标签的值来填充一个选择标签。填充的选择标记的值来自 JSON 文档。

这里的实际用途是用于离开渡轮码头以及它们可以到达的码头。

这是我正在使用的代码片段

$(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);
    });
  });
});

这是 JSON 文档的一个小示例

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

然后是 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>

我似乎一辈子都无法让“功能（渡轮）”运行，所以这让我认为 .val 工作不正常。让我知道你们是否有任何建议！

4

2 回答 2

0

Your JSON document needs to be refactored a bit for easier iteration.

Let's take this class for example.

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

And let's say (using ASP.NET MVC & C#) we are returning JSON by doing this:

    // 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);
    }

This will give us back a list of City objects for California. (Pretend the CityID's are meaningful.)

enter image description here

So now you just need to append them to your select list with the proper value and text.

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 回答
0

看来您的问题是，如果您的 ajax 请求实际上正在返回，那么您的 JSON 对象实际上并没有正确形成：

var ferries = { ... }

您的 JSON 对象应该是

{ ... }

在来自服务器的响应中没有变量赋值。

于 2012-10-19T01:28:59.443 回答